/* Catalog modern UI overrides (match header_redesign.css look & feel) */ /* Предотвращаем горизонтальный overflow - МИНИМАЛЬНЫЕ ПРАВИЛА */ html { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* base */ div.catalog { color: #111827; overflow-x: hidden !important; max-width: 100% !important; box-sizing: border-box !important; width: 100% !important; } /* Fix broken characters in product cards - ensure proper encoding */ .catalog-item { position: relative !important; z-index: 0 !important; overflow: visible !important; isolation: isolate !important; /* Создаем новый stacking context для предотвращения наложения */ } .catalog-item-text, .catalog-item-text-l, .catalog-item-text-l a.title, .catalog-item-text-l a.title span, .catalog-item-text-l .short-info, .catalog-item-text-l .extra-options { font-family: 'Montserrat', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; max-width: 100% !important; box-sizing: border-box !important; position: relative !important; z-index: 1 !important; /* Текст должен быть поверх других элементов */ } /* Исправляем наложение элементов в карточках товаров */ .catalog-item .border-box { position: relative !important; z-index: 0 !important; overflow: hidden !important; } .catalog-item .border-box img { position: relative !important; z-index: 0 !important; display: block !important; } /* Убираем битые символы и наложения от action badges */ .catalog-item > div[style*="position:absolute"] { z-index: 2 !important; pointer-events: auto !important; } /* Исправляем проблемы с кодировкой в тексте карточек */ .catalog-item * { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Исправляем рейтинг в карточках каталога - убираем битые символы "BO...BO..." */ div.catalog div.catalog-main div.catalog-item .productRate, .catalog-item .productRate, div.catalog-item .productRate { background: none !important; background-image: none !important; background-color: transparent !important; height: 20px !important; position: relative !important; width: 90px !important; min-width: 90px !important; margin-right: 10px !important; margin-left: 8px !important; display: inline-block !important; overflow: hidden !important; /* Изменено с visible на hidden, чтобы скрыть битые символы */ line-height: 0 !important; font-size: 0 !important; vertical-align: middle !important; /* Полностью скрываем любой текст внутри */ text-indent: -9999px !important; color: transparent !important; text-shadow: none !important; visibility: visible !important; /* Видимость для псевдоэлементов */ /* Убеждаемся, что элементы не накладываются друг на друга */ isolation: isolate !important; /* Создаем новый stacking context */ } /* Скрываем все текстовые узлы внутри productRate - максимальная специфичность */ div.catalog div.catalog-main div.catalog-item .productRate, div.catalog div.catalog-main div.catalog-item .productRate *, .catalog-item .productRate, .catalog-item .productRate *, div.catalog-item .productRate, div.catalog-item .productRate * { text-indent: -9999px !important; font-size: 0 !important; color: transparent !important; text-shadow: none !important; font-family: Arial, sans-serif !important; line-height: 0 !important; visibility: visible !important; /* Для псевдоэлементов */ } /* Скрываем любые текстовые узлы напрямую */ div.catalog div.catalog-main div.catalog-item .productRate::text, .catalog-item .productRate::text { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Отображаем звезды через псевдоэлементы - используем Unicode коды для надежности */ /* Фоновые (пустые) звезды - серые */ div.catalog div.catalog-main div.catalog-item .productRate::before, .catalog-item .productRate::before, div.catalog-item .productRate::before { content: "\2605\2605\2605\2605\2605" !important; /* Unicode черные звезды ★★★★★ */ color: #cbd5e1 !important; /* Светло-серый цвет для пустых звезд */ font-size: 18px !important; letter-spacing: 2px !important; display: block !important; line-height: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; text-indent: 0 !important; visibility: visible !important; opacity: 1 !important; font-family: Arial, sans-serif !important; /* Используем стандартный шрифт */ pointer-events: none !important; /* Чтобы не мешать кликам */ white-space: nowrap !important; /* Убеждаемся, что звезды в одной строке */ margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } div.catalog div.catalog-main div.catalog-item .productRate div, .catalog-item .productRate div, div.catalog-item .productRate div { display: block !important; height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; background: none !important; background-image: none !important; background-color: transparent !important; /* КРИТИЧНО: НЕ устанавливаем width здесь - он должен приходить из inline стиля шаблона */ /* Убираем width: auto !important так как это может конфликтовать с inline стилем */ min-width: 0 !important; max-width: 100% !important; cursor: pointer !important; z-index: 2 !important; overflow: hidden !important; /* КРИТИЧНО: скрываем часть звезд, которая выходит за границы */ text-indent: -9999px !important; font-size: 0 !important; color: transparent !important; visibility: visible !important; /* Для псевдоэлемента ::after */ box-sizing: border-box !important; /* Убеждаемся, что элемент не накладывается на ::before */ isolation: isolate !important; /* Создаем новый stacking context */ /* КРИТИЧНО: Убираем все отступы и смещения для точного выравнивания */ margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; /* КРИТИЧНО: Принудительно обрезаем содержимое */ clip-path: none !important; clip: auto !important; /* Убеждаемся, что содержимое не выходит за границы */ contain: layout style paint !important; } /* Заполненные звезды - золотые, отображаются поверх серых */ /* Перекрываем правила из card.css с максимальной специфичностью */ /* КРИТИЧНО: Эти правила должны быть после card.css, поэтому используем максимальную специфичность */ /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для перекрытия card.css - ПЕРЕКРЫВАЕМ card.css .productRate div::after */ /* ВАЖНО: Добавляем селектор .productRate div::after БЕЗ префиксов для максимального охвата */ .productRate div::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text .productRate div::after, .productRate div::after, div.catalog div.catalog-main div.catalog-item .productRate div::after, div.catalog .catalog-item .productRate div::after, .catalog-item .productRate div::after, div.catalog-item .productRate div::after, div.catalog div.catalog-main .catalog-item .productRate div::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate .productRate-fill::after, div.catalog div.catalog-main div.catalog-item .productRate .productRate-fill::after, .catalog-item .productRate .productRate-fill::after, div.catalog-item .productRate .productRate-fill::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div.productRate-fill::after, div.catalog div.catalog-main div.catalog-item .productRate div.productRate-fill::after, .catalog-item .productRate div.productRate-fill::after, div.catalog-item .productRate div.productRate-fill::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div[style*="width"]::after, div.catalog div.catalog-main div.catalog-item .productRate div[style*="width"]::after, .catalog-item .productRate div[style*="width"]::after, div.catalog-item .productRate div[style*="width"]::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div.productRate-filled::after, div.catalog div.catalog-main div.catalog-item .productRate div.productRate-filled::after, .catalog-item .productRate div.productRate-filled::after, div.catalog-item .productRate div.productRate-filled::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div[data-width]::after, div.catalog div.catalog-main div.catalog-item .productRate div[data-width]::after, .catalog-item .productRate div[data-width]::after, div.catalog-item .productRate div[data-width]::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div[data-filled]::after, div.catalog div.catalog-main div.catalog-item .productRate div[data-filled]::after, .catalog-item .productRate div[data-filled]::after, div.catalog-item .productRate div[data-filled]::after, div.catalog div.catalog-main div.catalog-item div.catalog-item-text div.catalog-item-text-r .productRate div[class*="fill"]::after, div.catalog div.catalog-main div.catalog-item .productRate div[class*="fill"]::after, .catalog-item .productRate div[class*="fill"]::after, div.catalog-item .productRate div[class*="fill"]::after { content: "\2605\2605\2605\2605\2605" !important; /* Unicode черные звезды ★★★★★ */ /* Используем яркий золотой цвет - ПЕРЕКРЫВАЕМ card.css */ /* КРИТИЧНО: card.css использует color: #f59e0b с -webkit-text-stroke и text-shadow */ /* Мы должны полностью перекрыть это более ярким золотым цветом */ color: #fbbf24 !important; /* Золотой #fbbf24 - ярче чем #f59e0b из card.css */ -webkit-text-fill-color: #fbbf24 !important; fill: #fbbf24 !important; /* Принудительно убираем обводку и тень из card.css */ -webkit-text-stroke: 0 !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; text-shadow: none !important; font-size: 18px !important; /* ТОЧНО такой же как у ::before */ letter-spacing: 2px !important; /* ТОЧНО такой же как у ::before */ display: block !important; line-height: 1 !important; /* ТОЧНО такой же как у ::before */ white-space: nowrap !important; position: absolute !important; top: 0 !important; /* ТОЧНО такой же как у ::before */ left: 0 !important; /* ТОЧНО такой же как у ::before - относительно родительского .productRate */ /* КРИТИЧНО: width должен быть фиксированным (90px), равным ширине родительского .productRate */ /* Это гарантирует, что золотые звезды всегда начинаются с той же позиции, что и серые */ width: 90px !important; /* Фиксированная ширина, равная ширине родительского .productRate */ height: 100% !important; overflow: visible !important; /* Позволяем звездам отображаться, они будут обрезаны родительским div */ text-indent: 0 !important; visibility: visible !important; opacity: 1 !important; font-family: Arial, sans-serif !important; /* ТОЧНО такой же как у ::before */ margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 3 !important; /* Убеждаемся, что золотые звезды поверх серых */ /* КРИТИЧНО: перекрываем text-shadow и -webkit-text-stroke из card.css */ /* card.css использует: -webkit-text-stroke: 0.8px #d97706 !important; text-shadow: 0 0 0 #d97706 !important; */ /* Мы должны полностью перекрыть это */ text-shadow: none !important; -webkit-text-stroke: 0 !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; stroke: none !important; stroke-width: 0 !important; background: transparent !important; background-color: transparent !important; filter: none !important; mix-blend-mode: normal !important; /* Убеждаемся, что элемент виден */ pointer-events: none !important; /* Чтобы не мешать кликам */ /* Убеждаемся, что золотые звезды не накладываются на серые */ isolation: isolate !important; /* Создаем новый stacking context */ } /* ДОПОЛНИТЕЛЬНО: Убеждаемся, что внутренний div получает ширину из inline стиля */ div.catalog div.catalog-main div.catalog-item .productRate div[style*="width"], .catalog-item .productRate div[style*="width"], div.catalog-item .productRate div[style*="width"] { /* Не перекрываем width - пусть работает inline стиль */ display: block !important; visibility: visible !important; } /* ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА: Стили для div с классом productRate-filled (добавляется через JS) */ /* Эти правила дублируют основные для максимальной надежности */ div.catalog div.catalog-main div.catalog-item .productRate div.productRate-filled::after, .catalog-item .productRate div.productRate-filled::after, div.catalog-item .productRate div.productRate-filled::after, div.catalog div.catalog-main div.catalog-item .productRate .productRate-fill::after, .catalog-item .productRate .productRate-fill::after, div.catalog-item .productRate .productRate-fill::after, div.catalog div.catalog-main div.catalog-item .productRate div.productRate-fill::after, .catalog-item .productRate div.productRate-fill::after, div.catalog-item .productRate div.productRate-fill::after, div.catalog div.catalog-main div.catalog-item .productRate div[data-width]::after, .catalog-item .productRate div[data-width]::after, div.catalog-item .productRate div[data-width]::after, div.catalog div.catalog-main div.catalog-item .productRate div[data-filled]::after, .catalog-item .productRate div[data-filled]::after, div.catalog-item .productRate div[data-filled]::after { content: "\2605\2605\2605\2605\2605" !important; color: #fbbf24 !important; /* Золотой цвет */ -webkit-text-fill-color: #fbbf24 !important; fill: #fbbf24 !important; font-size: 18px !important; letter-spacing: 2px !important; display: block !important; line-height: 1 !important; white-space: nowrap !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; text-indent: 0 !important; visibility: visible !important; opacity: 1 !important; font-family: Arial, sans-serif !important; z-index: 3 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; background: transparent !important; background-color: transparent !important; filter: none !important; mix-blend-mode: normal !important; stroke: none !important; pointer-events: none !important; } /* Дополнительная защита - скрываем любые дочерние текстовые узлы и элементы */ div.catalog div.catalog-main div.catalog-item .productRate > *:not(div), .catalog-item .productRate > *:not(div), div.catalog-item .productRate > *:not(div) { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; text-indent: -9999px !important; font-size: 0 !important; line-height: 0 !important; } /* Скрываем любые псевдоэлементы, которые могут содержать битые символы */ div.catalog div.catalog-main div.catalog-item .productRate::after, .catalog-item .productRate::after { display: none !important; content: none !important; visibility: hidden !important; } /* Catalog top row (category page): breadcrumbs above H1 */ :root { --mg-subcat-xpad: 18px; } .mgCatTopRow { display: flex !important; flex-direction: column !important; gap: 0 !important; /* Убираем gap, чтобы h1 был сразу после хлебных крошек */ margin: 12px 0 12px 0 !important; /* Добавляем margin-top: 12px, чтобы выровнять верхний край h1 с верхним краем плашки каталога (padding-top: 12px) */ padding-top: 0 !important; /* Выравниваем верхний край h1 с верхним краем блока каталога */ align-items: flex-start !important; /* Предотвращаем overflow */ position: relative !important; overflow-x: hidden !important; overflow-y: visible !important; overflow: visible !important; /* Разрешаем видимость всех элементов */ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* Ограничиваем ширину, чтобы не было overflow */ min-width: 0 !important; } .mgCatTopRow .main_page_title { margin: 0 !important; padding: 0 !important; order: 2 !important; /* h1 после breadcrumbs */ } /* Breadcrumbs - выше h1 - ВАЖНО: используем CSS order для правильного позиционирования */ .mgCatTopRow .mgBreadcrumbs, div.mgCatTopRow .mgBreadcrumbs, .mgCatTopRow div.mgBreadcrumbs, .panel .mgCatTopRow .mgBreadcrumbs, .panel div.mgCatTopRow .mgBreadcrumbs, div.catalog .mgCatTopRow .mgBreadcrumbs { margin: 0 0 8px 0 !important; margin-top: -50px !important; /* Поднимаем хлебные крошки немного вверх, чтобы они были выше h1 */ position: relative !important; z-index: 1 !important; margin-bottom: 8px !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important; color: #B6B5B5 !important; order: 1 !important; /* breadcrumbs первыми в flex контейнере */ /* Предотвращаем overflow */ position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; display: block !important; visibility: visible !important; transform: none !important; /* Убираем transform, используем flexbox order */ } /* Category page H1 - align with top edge of catalog block header (12px padding) */ .mgCatTopRow h1.main_page_title, div.mgCatTopRow h1.main_page_title, .mgCatTopRow h1, div.mgCatTopRow h1, div.mgCatTopRow h1.main_page_title, .mgCatTopRow div h1.main_page_title, div.mgCatTopRow div h1.main_page_title, .mgCatTopRow .main_page_title h1, .mgCatTopRow .main_page_title, div.mgCatTopRow .main_page_title h1, div.mgCatTopRow div h1.main_page_title, .mgCatTopRow .main_page_title h1.main_page_title { margin: 0 !important; margin-top: 8px !important; /* Опускаем h1 чуть ниже */ margin-bottom: 8px !important; /* Отступ снизу от h1 */ position: relative !important; z-index: 2 !important; /* H1 должен быть поверх хлебных крошек */ margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.1 !important; color: #111827 !important; align-self: flex-start !important; order: 2 !important; /* h1 после breadcrumbs */ /* Выравниваем по верхнему краю блока каталога (учитывая padding-top: 12px у .mgCatalogBlock__header) */ position: relative !important; /* H1 должен быть на уровне верхнего края блока каталога, убираем все отступы сверху */ width: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 2 !important; /* Увеличиваем z-index, чтобы h1 был виден поверх хлебных крошек */ overflow: visible !important; /* Предотвращаем обрезку */ text-overflow: clip !important; white-space: normal !important; } /* Переопределяем правило из a_global.css для h1 в .mgCatTopRow */ .mgCatTopRow div h1.main_page_title, div.mgCatTopRow div h1.main_page_title { margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } /* Breadcrumbs */ .mgBreadcrumbs { margin: 0; text-align: right; font-size: 11px !important; /* уменьшен размер */ font-weight: 400 !important; line-height: 1.2 !important; color: #B6B5B5 !important; /* светло-серый цвет */ } /* Хлебные крошки на страницах каталога - скрываем все, кроме тех, что в .mgCatTopRow */ /* Убираем transform, так как используем flexbox order в .mgCatTopRow */ .panel .mgBreadcrumbs:not(:has(td.mgHomeMain)):not(.mgCatTopRow .mgBreadcrumbs), .panel:has(div.catalog) .mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs), .panel:has(.mgCatTopRow) .mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs), div.catalog .mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs), body[data-is-catalog="true"] .mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs), body[data-is-catalog="true"] div.mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs) { display: none !important; /* Скрываем дубликаты хлебных крошек, оставляем только те, что в .mgCatTopRow */ position: relative !important; transform: none !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Исключение для главной страницы - не поднимаем хлебные крошки */ .panel:has(td.mgHomeMain) .mgBreadcrumbs, td.mgHomeMain .mgBreadcrumbs, .panel td.mgHomeMain .mgBreadcrumbs { transform: none !important; margin-top: 0 !important; } .mgBreadcrumbs a.title, .mgBreadcrumbs span.title { font-size: 11px !important; /* уменьшен размер */ font-weight: 400 !important; font-family: inherit !important; color: #B6B5B5 !important; /* светло-серый цвет */ text-decoration: none !important; display: inline !important; } .mgBreadcrumbs a.title:hover { text-decoration: underline !important; } @media (max-width: 720px) { .mgCatTopRow { margin-top: 20px; /* Reduce top margin on mobile */ } .mgCatTopRow .mgBreadcrumbs { text-align: left; } /* Исправляем слайдер цены на мобильных - чтобы не выходил за экран */ div.slider-wrapper { width: 100% !important; max-width: 100% !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; } div.slider-info { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 0 12px 0 !important; box-sizing: border-box !important; } div.slider-info div.slider-info-l, div.slider-info div.slider-info-r { float: none !important; display: flex !important; align-items: center !important; gap: 4px !important; flex: 0 0 auto !important; } div.slider-info input { width: 60px !important; min-width: 60px !important; max-width: 80px !important; box-sizing: border-box !important; padding: 4px 8px !important; font-size: 14px !important; } div.slider-controls { float: none !important; width: 100% !important; margin-top: 12px !important; display: flex !important; justify-content: flex-end !important; } /* Слайдер должен помещаться на экране */ div.catalog form#AdvancedSearchInCategory #slider-range { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Контейнер формы фильтра */ div.catalog form#AdvancedSearchInCategory { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; padding: 0 !important; } } /* Глобальный отступ от шапки - по умолчанию 100px для всех страниц */ .panel { margin-top: 100px; position: relative; z-index: 1; /* Убеждаемся, что контент ниже header и мега-меню */ overflow: visible !important; /* Разрешаем видимость элементов, которые поднимаются вверх (хлебные крошки) */ } /* На главной странице убираем отступ от шапки до h1 */ .panel:has(td.mgHomeMain) { margin-top: 0 !important; } /* Убираем компенсацию на главной странице */ td.mgHomeMain { margin-top: 0 !important; padding-top: 0 !important; } /* На страницах каталога отступ 100px (уже установлен по умолчанию выше) */ /* Дополнительные селекторы для надежности */ body[data-is-catalog="true"] .panel { margin-top: 100px !important; } /* Хлебные крошки на страницах каталога - поднимаем до середины отступа */ body[data-is-catalog="true"] .mgBreadcrumbs, body[data-is-catalog="true"] div.mgBreadcrumbs, body[data-is-catalog="true"] .panel .mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs), body[data-is-catalog="true"] .panel div.mgBreadcrumbs:not(.mgCatTopRow .mgBreadcrumbs) { display: none !important; /* Скрываем дубликаты хлебных крошек */ } /* Еще один способ - через селектор по URL (если :has не поддерживается) */ /* Добавляем отступ через более специфичный селектор */ .panel:not(:has(td.mgHomeMain)) { margin-top: 40px !important; } /* Но на главной странице отступ должен быть 0 (убрали отступ от шапки до h1) */ .panel:has(td.mgHomeMain) { margin-top: 0 !important; } .mgSideCard { background: #fff; border: 1px solid #d6d8e1; border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); } .mgSideCard__title { font-weight: 800; font-size: 14px; line-height: 1.2; color: #111827; margin: 0 0 10px 0; } .mgSideCard--auth { margin-top: 14px; font-family: 'Montserrat', Arial, sans-serif !important; } .mgSideCard--auth form#userform, .mgSideCard--auth table { width: 100% !important; font-family: 'Montserrat', Arial, sans-serif !important; } .mgSideCard--auth input.inbr { width: 100% !important; box-sizing: border-box; font-family: 'Montserrat', Arial, sans-serif !important; } .mgSideCard--auth input#promo_code.inbr { width: calc(100% - 58px) !important; /* leave room for the OK button */ display: inline-block; vertical-align: middle; } .mgSideCard--auth a[onclick*="promoCodeSend"] { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 12px !important; border-radius: 10px; background: #111827 !important; color: #fff !important; text-decoration: none !important; font-weight: 700 !important; line-height: 1; vertical-align: middle !important; margin-left: 8px !important; white-space: nowrap; box-sizing: border-box; } /* Homepage only: promo code button positioning */ .mgSection--auth .mgSideCard--auth input#promo_code.inbr, .mgSection--auth form#userform input#promo_code.inbr { width: 100% !important; display: block; margin-bottom: 8px; } .mgSection--auth .mgSideCard--auth a[onclick*="promoCodeSend"], .mgSection--auth form#userform a[onclick*="promoCodeSend"] { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 10px; background: #111827; color: #fff !important; text-decoration: none !important; font-weight: 700; line-height: 1; margin-left: 0; white-space: nowrap; } /* Product page styling intentionally left legacy for now (we'll redo from scratch). */ /* ================================ Product page (detail) — modern ================================ */ div.content div.card { background: #fff; border: 1px solid #d6d8e1; border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); /* Don't clip the right column if it overflows; prefer wrapping instead */ overflow-x: visible; overflow-y: visible; } div.content div.card h1 { color: #111827 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 24px !important; line-height: 1.3 !important; text-transform: none !important; } div.content div.card div.card-main { display: flex !important; gap: 16px; align-items: flex-start; flex-wrap: wrap; /* keep the right block visible; it can move below the image if needed */ justify-content: flex-start; flex-direction: row; /* enforce stable ordering */ width: 100%; max-width: 100%; box-sizing: border-box; } div.content div.card div.card-main div.card-main-l, div.content div.card div.card-main div.card-main-r { float: none !important; width: auto !important; min-width: 0; position: relative !important; /* keeps CloudZoom overlays contained */ max-width: 100% !important; box-sizing: border-box; } div.content div.card div.card-main div.card-main-l { order: 1 !important; /* image column on the left */ flex: 1 1 760px; /* make image column wider by default */ min-width: 0; } div.content div.card div.card-main div.card-main-r { order: 2 !important; /* offer/price column on the right */ flex: 0 0 300px; max-width: 300px; min-width: 260px; } /* absolutely prevent "behind the page" horizontal overflow on product page */ div.content div.card, div.panel, body { overflow-x: hidden; } @media (max-width: 1100px) { /* if the content cell becomes narrow (sidebar + fixed layout), stack safely */ div.content div.card div.card-main div.card-main-r, div.content div.card div.card-main div.card-main-l { flex: 1 1 100%; max-width: 100% !important; } } /* image */ div.content div.card div.card-main div.card-main-l div.border-box { border: 1px solid #eef0f6; border-radius: 12px; background: #fff; overflow: hidden; width: 100% !important; /* override legacy card.css 348px */ height: auto !important; /* override legacy card.css 348px */ /* keep the image block tall, but never oversized */ max-height: 520px; display: flex; align-items: center; justify-content: center; } div.content div.card div.card-main div.card-main-l div.border-box img { display: block; width: 100%; height: auto; object-fit: contain; max-width: none !important; /* override legacy card.css max-width:348px */ max-height: 520px !important; /* never taller than the block */ } /* template wraps the image in a table on this theme too */ div.content div.card div.card-main div.card-main-l div.border-box table, div.content div.card div.card-main div.card-main-l div.border-box tbody, div.content div.card div.card-main div.card-main-l div.border-box tr, div.content div.card div.card-main div.card-main-l div.border-box td { width: 100% !important; max-width: 100% !important; height: auto !important; } /* right column inner card */ div.content div.card div.card-main div.card-main-r div.offer { background: #fff; border: 1px solid #eef0f6; border-radius: 12px; padding: 14px; } /* availability */ div.content div.card div.card-main div.card-main-r .avail { color: #166534; font-weight: 700; } div.content div.card div.card-main div.card-main-r .notavail { color: #991b1b; font-weight: 700; } /* price (match logo scarlet) */ div.content div.card div.card-main div.card-main-r span.price span, div.content div.card div.card-main div.card-main-r span.price { color: #cc1f11 !important; font-weight: 900; } div.content div.card div.card-main div.card-main-r span.price { font-size: 42px; line-height: 1; display: inline-flex; align-items: baseline; gap: 6px; } div.content div.card div.card-main div.card-main-r span.price sup, div.content div.card div.card-main div.card-main-r sup.rublsup { color: #6b7280 !important; font-weight: 700; font-size: 14px; line-height: 1; } div.content div.card div.card-main div.card-main-r span.last-price { color: #9ca3af !important; text-decoration: line-through; font-weight: 700; } /* primary CTA */ div.content div.card div.card-main div.card-main-r a.buy { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 12px; padding: 0 !important; /* override legacy a_global.css padding */ border-radius: 12px; background: #111827; color: #fff !important; text-decoration: none !important; font-weight: 800; font-size: 14px; line-height: 1; } div.content div.card div.card-main div.card-main-r a.buy:hover { background: #0b1220; } /* Fast order link: neutralize legacy float/position so it stays on its own line */ div.content div.card div.card-main div.card-main-r a.fast-order { display: block !important; margin-top: 10px; float: none !important; clear: both; position: static !important; right: auto !important; top: auto !important; padding-bottom: 0 !important; text-align: right; color: #111827 !important; font-weight: 800; text-decoration: underline; } /* Rating line: remove legacy floats and keep text + stars aligned */ div.content div.card div.card-main div.card-main-r div.rate { display: flex; align-items: center; gap: 10px; padding-top: 12px !important; /* override card.css padding-top:15px */ } div.content div.card div.card-main div.card-main-r div.rate span { float: none !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 13px !important; color: #111827 !important; } div.content div.card div.card-main div.card-main-r div.rate span.rate-text, div.rate span.rate-text, div.rate span { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 13px !important; font-weight: 600 !important; color: #111827 !important; } div.content div.card div.card-main div.card-main-r div.rate span.rate-text span, div.rate span.rate-text span, div.rate span span { font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 13px !important; font-weight: 600 !important; color: #111827 !important; } /* Modern star rating - replace old image-based stars with Unicode/CSS stars */ div.content div.card div.card-main div.card-main-r div.rate div.productRate, div.content div.card div.card-main div.card-main-r .productRate, div.rate div.productRate, .productRate { background: none !important; background-image: none !important; width: 90px !important; min-width: 90px !important; height: 20px !important; display: inline-block !important; align-items: center !important; gap: 0 !important; position: relative !important; overflow: visible !important; margin: 0 0 0 8px !important; padding: 0 !important; line-height: 1 !important; vertical-align: middle !important; font-size: 18px !important; } div.content div.card div.card-main div.card-main-r div.rate div.productRate::before, div.rate div.productRate::before, .productRate::before { content: "\2605\2605\2605\2605\2605" !important; /* Unicode звезды ★★★★★ */ color: #cbd5e1 !important; /* Светло-серый цвет для пустых звезд */ font-size: 18px !important; letter-spacing: 2px !important; display: block !important; line-height: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; text-indent: 0 !important; visibility: visible !important; opacity: 1 !important; font-family: Arial, sans-serif !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; /* Убираем -webkit-text-stroke, используем прямой цвет */ -webkit-text-stroke: 0 !important; text-shadow: none !important; } div.content div.card div.card-main div.card-main-r div.rate div.productRate div, div.rate div.productRate div, .productRate div { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; background: none !important; background-image: none !important; overflow: hidden !important; /* НЕ устанавливаем width здесь - он должен приходить из inline стиля шаблона */ z-index: 2 !important; text-indent: -9999px !important; font-size: 0 !important; color: transparent !important; visibility: visible !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; } div.content div.card div.card-main div.card-main-r div.rate div.productRate div::after, div.rate div.productRate div::after, .productRate div::after { content: "\2605\2605\2605\2605\2605" !important; /* Unicode звезды ★★★★★ */ color: #fbbf24 !important; /* Золотой цвет, как в каталоге */ -webkit-text-fill-color: #fbbf24 !important; fill: #fbbf24 !important; font-size: 18px !important; letter-spacing: 2px !important; display: block !important; line-height: 1 !important; white-space: nowrap !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 90px !important; /* Фиксированная ширина, равная ширине родительского .productRate */ height: 100% !important; text-indent: 0 !important; visibility: visible !important; opacity: 1 !important; font-family: Arial, sans-serif !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 3 !important; overflow: visible !important; /* Убираем обводку и тень */ -webkit-text-stroke: 0 !important; -webkit-text-stroke-width: 0 !important; -webkit-text-stroke-color: transparent !important; text-shadow: none !important; } /* card-info block (article, manufacturer, etc.) */ div.content div.card div.card-main div.card-main-r div.card-info, div.card-main-r div.card-info { font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 13px !important; color: #111827 !important; line-height: 1.5 !important; margin: 12px 0 0 0 !important; } div.content div.card div.card-main div.card-main-r div.card-info span, div.card-main-r div.card-info span { font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 13px !important; color: #111827 !important; line-height: 1.5 !important; display: block !important; } div.content div.card div.card-main div.card-main-r div.card-info .bold, div.content div.card div.card-main div.card-main-r div.card-info b, div.card-main-r div.card-info .bold, div.card-main-r div.card-info b { font-weight: 700 !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; color: #111827 !important; } /* Product options (manufacturer, etc.) */ div.content div.card div.card-main div.card-main-r div.card-info br + span, div.card-main-r div.card-info br + span { font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 13px !important; color: #111827 !important; } /* secondary CTA (one click) */ div.content div.card div.card-main div.card-main-r a.one-click-order-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 10px; border-radius: 12px; background: #fff; border: 1px solid #d6d8e1; color: #111827 !important; text-decoration: none !important; font-weight: 800; font-size: 14px; line-height: 1; } div.content div.card div.card-main div.card-main-r a.one-click-order-link:hover { background: #f7f7f8; border-color: #111827; } /* delivery / region block — remove legacy orange + fix negative inline margin */ div.content div.card div.card-main div.card-main-r div.region { margin: 12px 0 0 0 !important; /* overrides inline margin:-20px */ padding: 12px; border-radius: 12px; border: 1px solid #eef0f6; background: #f7f7f8; color: #111827 !important; } /* remove legacy orange inside region/delivery calculator */ div.content div.card div.card-main div.card-main-r div.region div, div.content div.card div.card-main div.card-main-r div.region #delivery_cost, div.content div.card div.card-main div.card-main-r div.region #delivery_days, div.content div.card div.card-main div.card-main-r div.region .delivery_cost, div.content div.card div.card-main div.card-main-r div.region .delivery-currency { color: #111827 !important; } /* EditableSelect (geo_location) legacy selectBox: replace orange arrow with neutral chevron */ div.content div.card div.card-main div.card-main-r div.region .selectBox { position: relative !important; border: 1px solid #d6d8e1 !important; border-radius: 10px !important; height: 40px !important; background: #fff !important; box-sizing: border-box; width: 100% !important; /* override JS-calculated fixed width */ max-width: 100% !important; float: none !important; display: block; } div.content div.card div.card-main div.card-main-r div.region .selectBox:after { background: none !important; /* kill arrow2.png */ width: 40px !important; border-left: 1px solid #e5e7eb; } div.content div.card div.card-main div.card-main-r div.region .selectBox:before { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid #111827; border-bottom: 2px solid #111827; transform: rotate(45deg); pointer-events: none; } div.content div.card div.card-main div.card-main-r div.region .selectBox .selectBoxArrow { /* Keep the clickable (editableselect.js binds onclick to it), but hide it visually */ display: block !important; opacity: 0 !important; position: absolute !important; right: 0 !important; top: 0 !important; width: 40px !important; height: 40px !important; margin: 0 !important; z-index: 2; cursor: pointer; } div.content div.card div.card-main div.card-main-r div.region .selectBox input.textInput { height: 40px !important; line-height: 40px !important; padding: 0 46px 0 10px !important; width: 100% !important; border: 0 !important; background: transparent !important; color: #111827 !important; font-weight: 600; box-sizing: border-box; } div.content div.card div.card-main div.card-main-r div.region .selectBox .selectBoxOptionsContainer { width: 100% !important; left: 0 !important; top: 40px !important; box-sizing: border-box; } /* Similar products block (product page) */ .mgSimilar { margin-top: 26px; padding: 18px; border: 1px solid #eef0f6; border-radius: 14px; background: #fff; } .mgSimilar__title { font-size: 18px; font-weight: 900; color: #cc1f11; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 14px 0; } .mgSimilar__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .mgSimilar__card { position: relative; border: 1px solid #eef0f6; border-radius: 12px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); } .mgSimilar__imgWrap { display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #eef0f6; background: #fff; overflow: hidden; height: 170px; } .mgSimilar__imgWrap img { width: 100%; height: 100%; object-fit: contain; display: block; } .mgSimilar__name { color: #111827; text-decoration: none; font-weight: 800; font-size: 13px; line-height: 1.25; max-height: 48px; overflow: hidden; } .mgSimilar__name:hover { text-decoration: underline; } .mgSimilar__prices { margin-top: auto; } .mgSimilar__price { color: #cc1f11; font-weight: 900; font-size: 22px; line-height: 1.1; } .mgSimilar__oldPrice { margin-top: 4px; color: #9ca3af; font-weight: 800; text-decoration: line-through; } .mgSimilar__cur { font-weight: 700; font-size: 13px; color: #6b7280; } .mgSimilar__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 38px; border-radius: 12px; background: #111827; color: #fff !important; text-decoration: none !important; font-weight: 800; font-size: 14px; line-height: 1; } .mgSimilar__btn:hover { background: #0b1220; } .mgSimilar__badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 2; } .mgSimilar__badge img { width: 34px; height: 34px; object-fit: contain; display: block; } @media (max-width: 1100px) { .mgSimilar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .mgSimilar__grid { grid-template-columns: 1fr; } } /* more vertical spacing between rows so controls don't overlap */ div.content div.card div.card-main div.card-main-r div.region div[style*="margin-top:6px"] { margin-top: 12px !important; } div.content div.card div.card-main div.card-main-r div.region #geo_location_d_block, div.content div.card div.card-main div.card-main-r div.region [id^="geo_location_d_block"] { margin-top: 6px; margin-bottom: 12px; } div.content div.card div.card-main div.card-main-r div.region b + br + div { margin-top: 6px !important; } div.content div.card div.card-main div.card-main-r div.region b { line-height: 1.2; } div.content div.card div.card-main div.card-main-r div.region h4, div.content div.card div.card-main div.card-main-r div.region b, div.content div.card div.card-main div.card-main-r div.region span { color: #111827 !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; } div.content div.card div.card-main div.card-main-r h4 { font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif) !important; font-size: 14px !important; font-weight: 800 !important; color: #111827 !important; line-height: 1.3 !important; } div.content div.card div.card-main div.card-main-r #geo_location, div.content div.card div.card-main div.card-main-r select#delivery_agent, div.content div.card div.card-main div.card-main-r select#payment_variant { width: 100%; max-width: 100%; border: 1px solid #d6d8e1; border-radius: 10px; padding: 8px 10px; background: #fff; color: #111827; box-sizing: border-box; } /* fix legacy 26px height that clips select text on product page */ div.content div.card div.card-main div.card-main-r #geo_location, div.content div.card div.card-main div.card-main-r select#delivery_agent, div.content div.card div.card-main div.card-main-r select#payment_variant { height: 40px !important; line-height: 40px !important; padding: 0 12px !important; font-size: 14px; } div.content div.card div.card-main div.card-main-r select#delivery_agent option, div.content div.card div.card-main div.card-main-r select#payment_variant option { color: #111827; background: #fff; } @media (max-width: 980px) { div.content div.card div.card-main { flex-wrap: wrap; } div.content div.card div.card-main div.card-main-r { flex: 1 1 420px; max-width: 100%; } } /* modernize the old table/button look */ .mgSideCard--auth td { font-size: 13px; color: #111827; font-family: 'Montserrat', Arial, sans-serif !important; } .mgSideCard--auth label, .mgSideCard--auth span, .mgSideCard--auth input, .mgSideCard--auth a, .mgSideCard--auth div { font-family: 'Montserrat', Arial, sans-serif !important; } .mgSideCard--auth table.fsttab, .mgSideCard--auth table.sectb { border: 0 !important; background: transparent !important; } .mgSideCard--auth a.sectb, .mgSideCard--auth .sectb a { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 12px !important; border-radius: 10px; background: #111827 !important; color: #fff !important; text-decoration: none !important; font-weight: 700 !important; line-height: 1; margin-left: 8px !important; vertical-align: middle !important; box-sizing: border-box; margin-left: 8px !important; vertical-align: middle !important; box-sizing: border-box; } .mgSideCard--auth a.sectb:hover, .mgSideCard--auth .sectb a:hover { background: #0b1220; } .mgSideCard--auth table td { padding: 0; } /* Align buttons (Enter and Ok) to the right edge on catalog pages */ /* Password row (4th row in form table): align inner table with input and button to the right */ .mgSideCard--auth form#userform table tr:nth-child(4) td { text-align: right !important; } .mgSideCard--auth form#userform table tr:nth-child(4) td > table { margin-left: auto !important; margin-right: 0 !important; display: inline-table !important; } /* Promo code row (6th row in form table): stretch input field, keep button on the right */ .mgSideCard--auth form#userform table tr:nth-child(6) td { text-align: left !important; /* keep left alignment so input can stretch */ display: flex !important; align-items: center !important; gap: 8px !important; } .mgSideCard--auth form#userform table tr:nth-child(6) td input#promo_code.inbr { flex: 1 !important; /* stretch to fill available space */ width: auto !important; /* override inline width */ margin-right: 0 !important; } .mgSideCard--auth form#userform table tr:nth-child(6) td a[onclick*="promoCodeSend"] { flex-shrink: 0 !important; /* keep button at its natural width */ margin-left: 0 !important; } .mgSideCard--auth a[onclick*="promoCodeSend"] { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 12px !important; border-radius: 10px; background: #111827 !important; color: #fff !important; text-decoration: none !important; font-weight: 700 !important; line-height: 1; margin-left: 8px !important; vertical-align: middle !important; box-sizing: border-box; } .mgSideCard--auth a[onclick*="promoCodeSend"]:hover { background: #0b1220; } .mgSideCard--auth a:not(.sectb):not([onclick*="promoCodeSend"]) { color: #111827; text-decoration: none; font-weight: 600; } .mgSideCard--auth a:not(.sectb):not([onclick*="promoCodeSend"]):hover { text-decoration: underline; } /* subcategory pills block in category.tpl.html had fixed width inline; keep it responsive */ #box_circul[style*="width:733px"] { width: auto !important; max-width: 100% !important; } /* Filter tabs container: make it look like a card */ div.catalog form#AdvancedSearchInCategory .tabs { background: #fff; border: 1px solid #d6d8e1; border-radius: 12px; padding: 10px 12px 12px 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); /* keep tabs + "products found" inside the card even if legacy template uses absolute positioning */ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* legacy template has inline absolute positioning; neutralize it */ div.catalog form#AdvancedSearchInCategory .tabs #products_found_wrapper { position: static !important; float: none !important; right: auto !important; top: auto !important; width: auto !important; height: auto !important; order: 2; flex: 0 0 auto; margin-left: auto; padding: 8px 10px !important; border-radius: 10px !important; box-sizing: border-box; } /* tabs */ div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav { border-bottom: 1px solid #eef0f6; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; order: 1; flex: 1 1 auto; min-width: 0; } div.catalog form#AdvancedSearchInCategory .tabs .tabs-container { order: 3; flex: 1 1 100%; min-width: 0; margin-top: 10px; } div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li { list-style: none; margin: 0; padding: 0; float: none; /* override legacy floats */ /* override legacy tab chrome from card.css (border/height on
  • ) */ border: 0 !important; border-radius: 0 !important; background: transparent !important; height: auto !important; } div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li.active { background: transparent !important; padding-top: 0 !important; } div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid #d6d8e1; background: #f7f7f8; color: #111827; text-decoration: none; font-weight: 600; font-size: 13px; line-height: 1; margin: 0 !important; /* override legacy margin: 7px 9px */ } div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li.active a, div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li a:hover { background: #111827; border-color: #111827; color: #fff; } /* filter controls */ div.catalog form#AdvancedSearchInCategory .filter-controls { float: none !important; position: static !important; margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; } /* Reset button ("Сбросить") — match compact grey button style */ div.catalog form#AdvancedSearchInCategory .filter-controls .mgResetBtn { -webkit-appearance: none; appearance: none; background: #9ca3af; color: #fff; border: 1px solid #9ca3af; border-radius: 10px; padding: 10px 14px; height: auto; line-height: 1; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 1px 1px rgba(16, 24, 40, 0.06); } div.catalog form#AdvancedSearchInCategory .filter-controls .mgResetBtn:hover { background: #6b7280; border-color: #6b7280; } div.catalog form#AdvancedSearchInCategory .filter-controls input.submitter, div.catalog div.sort-b div.buttons .submitter, input.submitter { -webkit-appearance: none; appearance: none; background: #111827 !important; color: #fff !important; border: 1px solid #111827 !important; border-radius: 10px !important; padding: 10px 14px !important; height: auto !important; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 1px 1px rgba(16, 24, 40, 0.08); } div.catalog form#AdvancedSearchInCategory .filter-controls input.submitter:hover, div.catalog div.sort-b div.buttons .submitter:hover, input.submitter:hover { background: #0b1220 !important; border-color: #0b1220 !important; } /* reset image button (type=image) – keep, but make it look like secondary */ div.catalog form#AdvancedSearchInCategory .filter-controls input[type="image"] { border-radius: 10px; border: 1px solid #d6d8e1; background: #fff; padding: 8px 10px; height: 36px; } /* slider theming */ .ui-slider { background: #eef0f6; border-radius: 999px; } /* move the slider a bit down from the "от/до" row and add bottom margin */ div.catalog form#AdvancedSearchInCategory #slider-range { margin-top: 32px; margin-bottom: 20px; } .ui-slider .ui-slider-range { background: #111827 !important; } .ui-slider .ui-slider-handle { border-radius: 999px; border: 2px solid #111827 !important; background: #111827 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18); } /* jQuery UI theme can color handles green via ui-state classes; force neutral */ #slider-range .ui-slider-handle, #slider-range .ui-state-default, #slider-range .ui-widget-content .ui-state-default, #slider-range .ui-widget-header .ui-state-default, #slider-range .ui-state-hover, #slider-range .ui-state-focus, #slider-range .ui-state-active { background: #111827 !important; border-color: #111827 !important; } /* Sorting header: card-like - ALWAYS VISIBLE */ /* Hide pagination at top of catalog (before products) */ div.catalog .sort-b:first-of-type { display: none !important; } /* Убираем рамку у пагинации - применяем везде */ div.sort-b { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; justify-content: center !important; /* центрируем пагинацию */ align-items: center; } /* Sorting form - ALWAYS VISIBLE */ form.sort { display: block !important; margin-bottom: 10px !important; } form.sort div.sort-t { display: flex !important; /* Override any display: none */ height: auto !important; padding: 10px 12px !important; align-items: center; gap: 14px; flex-wrap: nowrap; border: 1px solid #d9e0e6 !important; background: #f0f3f5 !important; border-radius: 5px 5px 0 0 !important; margin: 10px 0 1px 0 !important; } /* sort bar layout: keep everything on one line and same sizing */ form.sort div.sort-t div.sort-tl, form.sort div.sort-t div.sort-tr { float: none !important; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; } form.sort div.sort-t div.sort-tl { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } form.sort div.sort-t div.sort-tr { flex: 0 0 auto; margin-left: auto !important; flex-wrap: nowrap; } form.sort div.sort-t span { white-space: nowrap; font-weight: 600; font-size: 14px; color: #111827; } form.sort div.sort-t select { height: 40px; padding: 8px 12px; font-size: 14px; line-height: 1; } @media (max-width: 980px) { form.sort div.sort-t { flex-wrap: wrap; } form.sort div.sort-t div.sort-tl, form.sort div.sort-t div.sort-tr { flex-wrap: wrap; } form.sort div.sort-t div.sort-tr { margin-left: 0 !important; } } /* Selects */ form.sort select, div.catalog form#AdvancedSearchInCategory select, div.catalog form#AdvancedSearchInCategory input[type="text"], div.catalog form#AdvancedSearchInCategory input[type="number"] { border: 1px solid #d6d8e1; border-radius: 10px; padding: 8px 10px; background: #fff; color: #111827; } /* Price input fields: make them taller and ensure proper display */ div.catalog form#AdvancedSearchInCategory input[name="search_price_from"], div.catalog form#AdvancedSearchInCategory input[name="search_price_to"] { width: 40px !important; /* keep original width */ height: 35px !important; /* increase height */ padding: 8px 10px !important; /* ensure padding matches other inputs */ display: inline !important; /* use inline instead of inline-block to stay in flow */ vertical-align: middle !important; margin: 0 4px !important; /* add spacing between label and input */ box-sizing: border-box !important; } /* Ensure table cell displays correctly */ div.catalog form#AdvancedSearchInCategory table td { vertical-align: middle !important; white-space: normal !important; /* allow wrapping if needed */ line-height: 1.5 !important; } /* Paginator pills */ div.sort-b ul.paginator { float: none !important; overflow: visible !important; list-style: none; margin: 0 auto !important; /* центрируем пагинацию */ padding: 0; display: flex; align-items: center; justify-content: center !important; /* центрируем элементы внутри */ gap: 6px; min-height: 35px; } div.sort-b ul.paginator li { float: none !important; margin: 0; padding: 0; display: flex; } div.sort-b ul.paginator li a, div.sort-b ul.paginator li span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; padding: 0 14px; margin: 0 !important; border-radius: 999px; border: 1px solid #d6d8e1; background: #fff; color: #111827; text-decoration: none; font-weight: 600; line-height: 1; box-sizing: border-box; } div.sort-b ul.paginator li a:hover { background: #f7f7f8; } div.sort-b ul.paginator li a.cur { background: #111827; border-color: #111827; color: #fff; } div.sort-b ul.paginator li span { background: #111827; border-color: #111827; color: #fff; } div.sort-b ul.paginator li span b { font-weight: 800; color: inherit; } /* Subcategories: remove legacy frame drawn by #box_circul from left_menu.css */ #box_circul.subcategories-container { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* Subcategories capsule style */ .subcategories-container { width: auto !important; padding: 0; margin: 8px 0 20px 0 !important; /* Поднимаем капсулы чуть выше */ } .subcategories-pills { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .subcategories-pills li { float: none !important; margin: 0 !important; padding: 0 !important; border: none !important; display: flex; } .subcategories-pills li a, .subcategories-pills li span { display: inline-flex; align-items: center; justify-content: center; padding: 8px var(--mg-subcat-xpad); min-height: 38px; border-radius: 999px; border: 1px solid #d6d8e1; background: #fff; color: #111827 !important; text-decoration: none !important; font-weight: 600; font-size: 14px; transition: all 0.2s ease; box-sizing: border-box; } .subcategories-pills li a:hover { background: #f7f7f8; border-color: #111827; } .subcategories-pills li span { background: #111827; border-color: #111827; color: #fff !important; } /* ================================ Sidebar catalog (category_tree_new) ================================ */ td.leftColumn { width: 260px !important; /* make content start much more to the left */ padding-right: 10px !important; box-sizing: border-box; } /* Collapsible catalog block - override legacy styles from catalog.css */ td.leftColumn .mgCatalogBlock, .leftColumn .mgCatalogBlock, .mgCatalogBlock { margin-bottom: 20px !important; border: 1px solid #ccdae3 !important; border-radius: 5px !important; background: #ffffff !important; overflow: hidden !important; display: block !important; } td.leftColumn .mgCatalogBlock__header, .leftColumn .mgCatalogBlock__header, .mgCatalogBlock__header { background: #fafbfc !important; padding: 12px 14px !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px solid #e1e8eb !important; user-select: none !important; transition: background-color 0.2s !important; } td.leftColumn .mgCatalogBlock__header:hover, .leftColumn .mgCatalogBlock__header:hover, .mgCatalogBlock__header:hover { background: #e1e8eb !important; } td.leftColumn .mgCatalogBlock__title, .leftColumn .mgCatalogBlock__title, .mgCatalogBlock__title { font-family: var(--mg-font-sans, 'Montserrat', Arial, sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; color: #2a2a2a !important; } td.leftColumn .mgCatalogBlock__toggle, .leftColumn .mgCatalogBlock__toggle, .mgCatalogBlock__toggle { font-size: 12px !important; color: #666 !important; transition: transform 0.3s !important; } td.leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__toggle, .leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__toggle, .mgCatalogBlock.collapsed .mgCatalogBlock__toggle { transform: rotate(-90deg) !important; } td.leftColumn .mgCatalogBlock__body, .leftColumn .mgCatalogBlock__body, .mgCatalogBlock__body { overflow: hidden !important; transition: max-height 0.3s ease-out !important; max-height: 5000px !important; } td.leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__body, .leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__body, .mgCatalogBlock.collapsed .mgCatalogBlock__body { max-height: 0 !important; padding: 0 !important; border-top: none !important; } .panel td.leftColumn + td { padding-left: 10px; width: auto !important; min-width: 0; } /* Product pages use the same table layout but not always inside .panel */ td.leftColumn + td { width: auto !important; /* prevents 100% + sidebar overflow */ min-width: 0; padding-left: 10px; } @media (max-width: 1100px) { td.leftColumn { width: 220px !important; padding-right: 10px !important; } .panel td.leftColumn + td { padding-left: 10px; } } #categories_menu_folded, #categories_menu_unfolded, .precached-category-body { width: 100%; max-width: 260px; } /* But when inside .mgCatalogBlock, menu should not have border/background (it's handled by the block) */ /* Override left_menu.css styles for ul#menu_next inside .mgCatalogBlock */ td.leftColumn .mgCatalogBlock ul#menu, td.leftColumn .mgCatalogBlock ul#menu_next, .leftColumn .mgCatalogBlock ul#menu, .leftColumn .mgCatalogBlock ul#menu_next, .mgCatalogBlock ul#menu, .mgCatalogBlock ul#menu_next { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: none !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; box-shadow: none !important; text-align: left !important; -moz-border-radius: 0 !important; } /* Override left_menu.css styles for menu items inside .mgCatalogBlock */ td.leftColumn .mgCatalogBlock ul#menu li, td.leftColumn .mgCatalogBlock ul#menu_next li, .leftColumn .mgCatalogBlock ul#menu li, .leftColumn .mgCatalogBlock ul#menu_next li, .mgCatalogBlock ul#menu li, .mgCatalogBlock ul#menu_next li { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; position: relative !important; } /* Override left_menu.css styles for menu links inside .mgCatalogBlock */ td.leftColumn .mgCatalogBlock ul#menu li a, td.leftColumn .mgCatalogBlock ul#menu_next li a, .leftColumn .mgCatalogBlock ul#menu li a, .leftColumn .mgCatalogBlock ul#menu_next li a, .mgCatalogBlock ul#menu li a, .mgCatalogBlock ul#menu_next li a { width: 100% !important; max-width: 100% !important; display: block !important; margin: 0 !important; padding: 7px 16px !important; background: #fff !important; color: #111827 !important; text-decoration: none !important; text-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; font: normal normal 700 14px/1.5 'Montserrat', verdana, tahoma, arial, Monaco !important; border-bottom: 1px solid #eef0f6 !important; box-sizing: border-box; line-height: 1.5 !important; /* Ensure text aligns properly */ word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; overflow: hidden !important; } /* Remove arrows from menu items inside .mgCatalogBlock (main catalog menu) */ td.leftColumn .mgCatalogBlock ul#menu li a::after, td.leftColumn .mgCatalogBlock ul#menu_next li a::after, .leftColumn .mgCatalogBlock ul#menu li a::after, .leftColumn .mgCatalogBlock ul#menu_next li a::after, .mgCatalogBlock ul#menu li a::after, .mgCatalogBlock ul#menu_next li a::after { display: none !important; content: none !important; } /* Ensure span inside menu links displays properly */ td.leftColumn .mgCatalogBlock ul#menu li a span, td.leftColumn .mgCatalogBlock ul#menu_next li a span, .leftColumn .mgCatalogBlock ul#menu li a span, .leftColumn .mgCatalogBlock ul#menu_next li a span, .mgCatalogBlock ul#menu li a span, .mgCatalogBlock ul#menu_next li a span { display: inline-block !important; width: 100% !important; max-width: 100% !important; vertical-align: baseline !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; box-sizing: border-box; } #categories_menu_unfolded ul#menu, #categories_menu_unfolded ul#menu_next, .precached-category-body ul#menu_next { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 1px solid #d6d8e1; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); } #categories_menu_unfolded ul#menu li, #categories_menu_unfolded ul#menu_next li, .precached-category-body ul#menu_next li { float: none !important; width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #categories_menu_unfolded ul#menu li a, #categories_menu_unfolded ul#menu_next li a, .precached-category-body ul#menu_next li a { background: #fff !important; color: #2a2a2a !important; text-decoration: none !important; text-shadow: none !important; font-size: 16px !important; font: normal normal normal 16px/1.15 'Montserrat', verdana, tahoma, arial, Monaco !important; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 16px !important; height: auto !important; line-height: 1.15 !important; border-bottom: 1px solid #eef0f6 !important; box-sizing: border-box; } /* CRITICAL: Styles for dynamically created ul#menu_next (JS creates it and adds to body) */ /* These styles apply to the dropdown menu created by category_tree_new_v2.js */ /* The menu is created as: body > div > div > ul#menu_next */ body > div[style*="position: absolute"] ul#menu_next, body > div[style*="position:absolute"] ul#menu_next, body > div > div > ul#menu_next, body > div > div ul#menu_next, body > div ul#menu_next, body ul#menu_next { list-style: none !important; text-align: left !important; width: 200px !important; margin: 0 !important; padding: 0 !important; border: 1px #ccdae3 solid !important; background: #ffffff !important; border-radius: 5px !important; -moz-border-radius: 5px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; z-index: 999 !important; } body > div[style*="position: absolute"] ul#menu_next li, body > div[style*="position:absolute"] ul#menu_next li, body > div > div > ul#menu_next li, body > div > div ul#menu_next li, body > div ul#menu_next li, body ul#menu_next li { width: 200px !important; display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: hidden !important; position: relative !important; } body > div[style*="position: absolute"] ul#menu_next li a, body > div[style*="position:absolute"] ul#menu_next li a, body > div > div > ul#menu_next li a, body > div > div ul#menu_next li a, body > div ul#menu_next li a, body ul#menu_next li a { width: auto !important; display: block !important; font-size: 16px !important; font: normal normal normal 16px/22px 'Montserrat', verdana, tahoma, arial, Monaco !important; margin: 0 !important; padding: 8px 14px !important; color: #2a2a2a !important; text-decoration: none !important; text-shadow: none !important; border-bottom: 1px #e1e8eb solid !important; background: #fafbfc !important; } body > div[style*="position: absolute"] ul#menu_next li a.last, body > div[style*="position:absolute"] ul#menu_next li a.last, body > div > div > ul#menu_next li a.last, body > div > div ul#menu_next li a.last, body > div ul#menu_next li a.last, body ul#menu_next li a.last { border-bottom: 0 !important; } body > div[style*="position: absolute"] ul#menu_next li a:hover, body > div[style*="position:absolute"] ul#menu_next li a:hover, body > div > div > ul#menu_next li a:hover, body > div > div ul#menu_next li a:hover, body > div ul#menu_next li a:hover, body ul#menu_next li a:hover { background: #e1e8eb !important; color: #cd2921 !important; text-decoration: none !important; } #categories_menu_unfolded ul#menu li a.last, #categories_menu_unfolded ul#menu_next li a.last, .precached-category-body ul#menu_next li a.last { border-bottom: 0 !important; } #categories_menu_unfolded ul#menu li a span, #categories_menu_unfolded ul#menu_next li a span, .precached-category-body ul#menu_next li a span { display: block !important; height: auto !important; font-weight: 700; font-size: 17px !important; padding: 0 !important; margin: 0 !important; color: #2a2a2a !important; white-space: normal !important; } /* Left sidebar category menu - increase font size */ /* Target all possible contexts for the left menu - must override left_menu.css and any other rules */ td.leftColumn ul#menu li a, td.leftColumn ul#menu li a span, td.leftColumn ul#menu li a span.big, .leftColumn ul#menu li a, .leftColumn ul#menu li a span, .leftColumn ul#menu li a span.big, .panel td.leftColumn ul#menu li a, .panel td.leftColumn ul#menu li a span, .panel td.leftColumn ul#menu li a span.big, table td.leftColumn ul#menu li a, table td.leftColumn ul#menu li a span, table td.leftColumn ul#menu li a span.big, table.panel td.leftColumn ul#menu li a, table.panel td.leftColumn ul#menu li a span, table.panel td.leftColumn ul#menu li a span.big, ul#menu li a, ul#menu li a span, ul#menu li a span.big { font-size: 16px !important; font: normal normal normal 16px/38px 'Montserrat', verdana, tahoma, arial, Monaco !important; } #categories_menu_unfolded ul#menu li a::after, #categories_menu_unfolded ul#menu_next li a::after, .precached-category-body ul#menu_next li a::after { content: '\203A'; font-size: 20px; line-height: 1; color: #9ca3af; flex: 0 0 auto; } #categories_menu_unfolded ul#menu li a:hover, #categories_menu_unfolded ul#menu_next li a:hover, .precached-category-body ul#menu_next li a:hover { background: #f7f7f8 !important; color: #111827 !important; } /* catalog main container matches the card style */ div.catalog div.catalog-main { background: #fff; border: 1px solid #d6d8e1; border-radius: 12px; } /* responsive: stack filter and list nicely */ @media (max-width: 980px) { div.catalog form#AdvancedSearchInCategory .filter-controls { justify-content: flex-start; } } /* === Modern static pages (aux pages) === */ .mgAuxPageWrap #box_circul { width: min(1200px, calc(100% - 32px)) !important; margin: 18px auto !important; background: #fff; border: 1px solid #ececf0; border-radius: 14px; box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06); overflow: hidden; } .mgAuxPageWrap #box_info { padding: 18px 20px !important; } .mgAuxPageWrap .hdbtop { padding: 0 !important; } .mgAuxPage { font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif); color: #111827; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; } .mgAuxPage h1, .mgAuxPage h2, .mgAuxPage h3 { font-family: inherit; color: #111827; line-height: 1.2; margin: 0 0 12px; } .mgAuxPage h1 { font-size: 28px; font-weight: 900; } .mgAuxPage h2 { font-size: 22px; font-weight: 800; margin-top: 18px; } .mgAuxPage h3 { font-size: 18px; font-weight: 800; margin-top: 16px; } .mgAuxPage p { margin: 0 0 12px; } .mgAuxPage ul, .mgAuxPage ol { margin: 0 0 12px 20px; padding: 0; } /* Remove legacy orange accents on static pages */ .mgAuxPage a, .mgAuxPage a:visited { color: #111827 !important; text-decoration: underline; } .mgAuxPage a:hover { text-decoration: none; } .mgAuxPage font, .mgAuxPage font * { color: inherit !important; } .mgAuxPage img { max-width: 100% !important; height: auto !important; } .mgAuxPage table { max-width: 100% !important; } .mgAuxPage hr { border: 0; height: 1px; background: #ececf0; margin: 16px 0; } @media (max-width: 720px) { .mgAuxPageWrap #box_circul { width: calc(100% - 24px) !important; margin: 14px auto !important; } .mgAuxPageWrap #box_info { padding: 14px 14px !important; } .mgAuxPage { font-size: 14px; } .mgAuxPage h1 { font-size: 22px; } .mgAuxPage h2 { font-size: 18px; } } /* Aux pages: modern title bar (replaces legacy orange #zag_box) */ .mgAuxPageWrap #zag_box { background: transparent !important; border: 0 !important; border-bottom: 1px solid #ececf0 !important; color: #111827 !important; padding: 0 0 12px 0 !important; margin: 0 0 14px 0 !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif); font-size: 26px; font-weight: 900; letter-spacing: 0; text-transform: none !important; } /* If legacy CSS paints a background on the container, neutralize it */ .mgAuxPageWrap #box_circul, .mgAuxPageWrap #box_info { background-image: none !important; } /* Aux pages: kill legacy title shadows/outline */ .mgAuxPageWrap #zag_box { text-shadow: none !important; box-shadow: none !important; -webkit-text-stroke: 0 !important; text-align: left !important; } /* === Modern news pages === */ .mgNewsPageWrap #box_circul { width: auto !important; margin-top: 0 !important; background: #fff; border: 1px solid #ececf0; border-radius: 14px; box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06); overflow: hidden; } .mgNewsPageWrap #zag_box { background: transparent !important; border: 0 !important; border-bottom: 1px solid #ececf0 !important; color: #111827 !important; padding: 14px 18px !important; margin: 0 !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif); font-size: 26px; font-weight: 900; text-shadow: none !important; box-shadow: none !important; text-align: left !important; } .mgNewsPageWrap #box_info { padding: 18px 18px 20px !important; border-top: 0 !important; font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif); color: #111827; font-size: 15px; line-height: 1.65; } .mgNewsPageWrap .hdbtop { padding: 0 !important; } .mgNewsPageWrap a, .mgNewsPageWrap a:visited { color: #111827 !important; text-decoration: underline; } .mgNewsPageWrap a:hover { text-decoration: none; } .mgNewsPageWrap img { max-width: 100% !important; height: auto !important; } @media (max-width: 720px) { .mgNewsPageWrap #zag_box { font-size: 22px; padding: 12px 14px !important; } .mgNewsPageWrap #box_info { padding: 14px 14px 16px !important; font-size: 14px; } } /* === Mobile adaptation === */ @media (max-width: 820px) { /* prevent horizontal scroll from legacy fixed tables */ html, body { max-width: 100%; overflow-x: hidden; } img { max-width: 100% !important; height: auto !important; } /* Comfortable tap targets */ a, button, input[type="submit"], input[type="button"], .mgBtn { touch-action: manipulation; } /* Avoid iOS auto-zoom on form fields */ input, select, textarea { font-size: 16px !important; } /* Make legacy fixed-width wrappers fluid */ table[style*="width:1024"], table[style*="width:970"], table[style*="width:980"], table[width="1024"], table[width="970"], table[width="980"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Предотвращаем overflow для всех таблиц */ table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; box-sizing: border-box !important; } /* Предотвращаем overflow для всех контейнеров */ .panel, .container, td.container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; /* Разрешаем видимость элементов, которые поднимаются вверх (h1, хлебные крошки) */ } /* Изображения должны быть адаптивными */ img { max-width: 100% !important; height: auto !important; } /* Catalog/product pages often use left column table layout -> stack */ .panel td.leftColumn, .panel td.middleColumn, .panel td.rightColumn, .panel td.left, .panel td.center, .panel td.right { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; } /* When layout is leftColumn + content cell */ .panel td.leftColumn + td { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; } /* Reduce legacy side padding/gaps */ .panel td.container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100vw; box-sizing: border-box; overflow-x: hidden; overflow-y: visible !important; /* Разрешаем видимость элементов, которые поднимаются вверх */ } /* Forms/buttons on legacy pages */ input[type="text"], input[type="password"], input[type="email"], select, textarea { max-width: 100% !important; box-sizing: border-box; } /* Long tables inside content: allow horizontal scroll instead of breaking */ .content table { display: block; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .content table tbody { display: table; width: 100%; } /* Panel top gap (under header) */ .panel { margin-top: 24px !important; } } @media (max-width: 520px) { /* tighten typography */ body { font-size: 14px; } } /* Header spacer fix (no fixed header) */ .mgHeader + .panel { margin-top: 0 !important; } /* CRITICAL: Force font size for left menu - must be at the end to override everything */ td.leftColumn ul#menu li a, td.leftColumn ul#menu li a span, td.leftColumn ul#menu li a span.big, .leftColumn ul#menu li a, .leftColumn ul#menu li a span, .leftColumn ul#menu li a span.big, .panel td.leftColumn ul#menu li a, .panel td.leftColumn ul#menu li a span, .panel td.leftColumn ul#menu li a span.big, table td.leftColumn ul#menu li a, table td.leftColumn ul#menu li a span, table td.leftColumn ul#menu li a span.big, table.panel td.leftColumn ul#menu li a, table.panel td.leftColumn ul#menu li a span, table.panel td.leftColumn ul#menu li a span.big, div.leftColumn ul#menu li a, div.leftColumn ul#menu li a span, div.leftColumn ul#menu li a span.big, #left_block ul#menu li a, #left_block ul#menu li a span, #left_block ul#menu li a span.big, body td.leftColumn ul#menu li a, body td.leftColumn ul#menu li a span, body td.leftColumn ul#menu li a span.big, body .leftColumn ul#menu li a, body .leftColumn ul#menu li a span, body .leftColumn ul#menu li a span.big { font-size: 16px !important; font: normal normal normal 16px/38px 'Montserrat', verdana, tahoma, arial, Monaco !important; line-height: 38px !important; } td.leftColumn ul#menu li a span.big, .leftColumn ul#menu li a span.big, .panel td.leftColumn ul#menu li a span.big, table td.leftColumn ul#menu li a span.big, div.leftColumn ul#menu li a span.big, #left_block ul#menu li a span.big { font-size: 16px !important; font: normal normal normal 16px/18px 'Montserrat', verdana, tahoma, arial, Monaco !important; line-height: 18px !important; } /* CRITICAL: Force styles for dropdown menu in left block - must override everything */ td.leftColumn ul#menu li:hover ul li a, .leftColumn ul#menu li:hover ul li a, .panel td.leftColumn ul#menu li:hover ul li a, table td.leftColumn ul#menu li:hover ul li a, div.leftColumn ul#menu li:hover ul li a, #left_block ul#menu li:hover ul li a, body td.leftColumn ul#menu li:hover ul li a, body .leftColumn ul#menu li:hover ul li a, ul#menu li:hover ul li a, ul#menu li.iehover ul li a { font-size: 16px !important; font-family: 'Montserrat', Arial, sans-serif !important; background: #fafbfc !important; color: #2a2a2a !important; text-decoration: underline !important; padding: 4px 20px 9px !important; border-bottom: 1px #e1e8eb solid !important; width: auto !important; display: block !important; text-shadow: none !important; } td.leftColumn ul#menu li:hover ul li a:hover, .leftColumn ul#menu li:hover ul li a:hover, .panel td.leftColumn ul#menu li:hover ul li a:hover, table td.leftColumn ul#menu li:hover ul li a:hover, div.leftColumn ul#menu li:hover ul li a:hover, #left_block ul#menu li:hover ul li a:hover, body td.leftColumn ul#menu li:hover ul li a:hover, body .leftColumn ul#menu li:hover ul li a:hover, ul#menu li:hover ul li a:hover, ul#menu li.iehover ul li a:hover { background: #e1e8eb !important; color: #cd2921 !important; text-decoration: underline !important; } /* Ensure dropdown menu container is visible */ td.leftColumn ul#menu li:hover ul, .leftColumn ul#menu li:hover ul, .panel td.leftColumn ul#menu li:hover ul, table td.leftColumn ul#menu li:hover ul, div.leftColumn ul#menu li:hover ul, #left_block ul#menu li:hover ul, body td.leftColumn ul#menu li:hover ul, body .leftColumn ul#menu li:hover ul, ul#menu li:hover ul { display: block !important; width: 200px !important; margin: 0 0 0 1px !important; padding: 4px 0 !important; border: 1px #ccdae3 solid !important; background: #ffffff !important; border-radius: 5px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; z-index: 999 !important; } /* CRITICAL: Styles for dynamically created ul#menu_next dropdown (created by JS, added to body) */ /* These must override ALL other rules - highest specificity */ /* JS creates: body > div > div > ul#menu_next */ body > div > div > ul#menu_next, body > div > div ul#menu_next, body > div ul#menu_next, body ul#menu_next, div > div > ul#menu_next, div > div ul#menu_next, div ul#menu_next, ul#menu_next { list-style: none !important; text-align: left !important; width: 200px !important; margin: 0 !important; padding: 0 !important; border: 1px #ccdae3 solid !important; background: #ffffff !important; border-radius: 5px !important; -moz-border-radius: 5px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; z-index: 999 !important; } body > div > div > ul#menu_next li, body > div > div ul#menu_next li, body > div ul#menu_next li, body ul#menu_next li, div > div > ul#menu_next li, div > div ul#menu_next li, div ul#menu_next li, ul#menu_next li { width: 200px !important; display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: hidden !important; position: relative !important; } body > div > div > ul#menu_next li a, body > div > div ul#menu_next li a, body > div ul#menu_next li a, body ul#menu_next li a, div > div > ul#menu_next li a, div > div ul#menu_next li a, div ul#menu_next li a, ul#menu_next li a { width: auto !important; display: block !important; font-size: 16px !important; font: normal normal normal 16px/22px 'Montserrat', verdana, tahoma, arial, Monaco !important; margin: 0 !important; padding: 8px 14px !important; color: #2a2a2a !important; text-decoration: none !important; text-shadow: none !important; border-bottom: 1px #e1e8eb solid !important; background: #fafbfc !important; } body > div > div > ul#menu_next li a.last, body > div > div ul#menu_next li a.last, body > div ul#menu_next li a.last, body ul#menu_next li a.last, div > div > ul#menu_next li a.last, div > div ul#menu_next li a.last, div ul#menu_next li a.last, ul#menu_next li a.last { border-bottom: 0 !important; } body > div > div > ul#menu_next li a:hover, body > div > div ul#menu_next li a:hover, body > div ul#menu_next li a:hover, body ul#menu_next li a:hover, div > div > ul#menu_next li a:hover, div > div ul#menu_next li a:hover, div ul#menu_next li a:hover, ul#menu_next li a:hover { background: #e1e8eb !important; color: #cd2921 !important; text-decoration: none !important; } /* КРИТИЧНО: Предотвращаем overflow на всей странице */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } .mgHeader__container { max-width: 100% !important; box-sizing: border-box !important; } .mgHeader__midGrid { max-width: 100% !important; box-sizing: border-box !important; } .mgSearchBar { max-width: 100% !important; box-sizing: border-box !important; } /* Хлебные крошки на странице товара - стили как на странице каталога */ div.content > div:first-child a.title, div.content > div:first-child span.title { font-size: 11px !important; font-weight: 400 !important; font-family: inherit !important; color: #B6B5B5 !important; /* светло-серый цвет как на странице каталога */ text-decoration: none !important; display: inline !important; } div.content > div:first-child a.title:hover { text-decoration: underline !important; } /* Также применяем стили к хлебным крошкам на странице товара через более специфичный селектор */ div.content div[style*="margin-bottom: 5px"] a.title, div.content div[style*="margin-bottom: 5px"] span.title { font-size: 11px !important; font-weight: 400 !important; font-family: inherit !important; color: #B6B5B5 !important; /* светло-серый цвет как на странице каталога */ text-decoration: none !important; display: inline !important; } div.content div[style*="margin-bottom: 5px"] a.title:hover { text-decoration: underline !important; }