/* Room Profile — адаптивный мост между мобильным и десктопным макетами. * * ЗАЧЕМ ЭТОТ ФАЙЛ. UI-кит из Claude Design нарисован как ДВА фиксированных * макета: мобильные классы .k-* и десктопные .k-d*. Между ними переходов нет — * в ките это два отдельных экрана, и так и задумано для показа. * * На живом сайте так нельзя: одна страница должна работать на любой ширине. * Дублировать разметку (мобильная + десктопная копии) — плохо: карточки товаров * попадут в код дважды, поисковики увидят дубли, страница потяжелеет. * * Поэтому разметка ОДНА — на десктопных классах, а этот файл ужимает её до * телефона. Правится руками (в отличие от brand/components/kit.css, которые * собираются скриптом из экспорта). * * Точка перелома — 820px: ниже неё десктопная сетка перестаёт помещаться. */ @media (max-width: 820px) { /* Поля экрана вместо контейнера десктопа */ .k-dwrap { padding: 0 var(--rp-pad-screen); } /* Герой: картинка сверху, текст под ней */ .k-dhero { grid-template-columns: 1fr; gap: var(--rp-gap); padding: var(--rp-gap) 0; } .k-dhero-main { min-height: 300px; } /* На десктопе текст героя занимает 60% ширины, чтобы не наезжать на фото. На телефоне это ограничение рвёт заголовок по одному слову — снимаем. */ .k-dhero-bd { max-width: 100%; padding: var(--rp-gap-xl); } .k-dhero-bd h1 { font-size: var(--rp-text-3xl); } .k-dhero-bd p { font-size: var(--rp-text-base); max-width: none; } .k-dhero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; display: grid; } /* Категории — две в ряд, нечётная последняя занимает всю ширину: иначе одинокая плитка «висит» в ряду (правка Антона по превью). */ .k-dcats { grid-template-columns: 1fr 1fr; gap: var(--rp-gap-sm); } .k-dcats > .k-dcat:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; } .k-dcat { min-height: 0; padding: var(--rp-gap); } /* Товарные ленты: на телефоне листаются вбок, а не ломаются в сетку. Так на первом экране помещается больше товара — как в референсах. */ .k-dgrid4 { display: flex; gap: var(--rp-gap-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--rp-pad-screen) * -1); padding: 0 var(--rp-pad-screen) 4px; } .k-dgrid4::-webkit-scrollbar { display: none; } .k-dgrid4 > * { flex: 0 0 158px; scroll-snap-align: start; } /* Заголовки разделов мельче */ .k-dsect { padding: var(--rp-gap-lg) 0; } .k-dsect-h h2 { font-size: var(--rp-text-xl); } .k-dsect-h a { font-size: var(--rp-text-sm); } /* Блок доверия — в столбик по два */ .k-dtrust { grid-template-columns: 1fr 1fr; gap: var(--rp-gap-sm); padding-bottom: var(--rp-gap-xl); } .k-dtrust > * { flex-direction: column; text-align: center; gap: var(--rp-gap-sm); } } @media (max-width: 420px) { .k-dtrust { grid-template-columns: 1fr; } .k-dhero-side { grid-template-columns: 1fr; } } /* Карточка товара внутри ленты: имя ссылкой, но выглядит как текст */ .rp-pcard__nm { text-decoration: none; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rp-pcard__nm:hover { color: var(--rp-brand-600); } .rp-pcard__ph a { display: block; width: 100%; height: 100%; } /* Пустое состояние рейтинга на главной: отзывов пока нет — так и пишем, без выдуманных оценок. Появятся настоящие — блок заменится сводкой. */ .rp-shoprate { background: var(--rp-paper); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); padding: var(--rp-gap-lg); display: flex; gap: var(--rp-gap-lg); align-items: center; flex-wrap: wrap; } .rp-shoprate__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--rp-ink-50); color: var(--rp-ink-300); display: grid; place-items: center; flex: 0 0 auto; } .rp-shoprate__tx { flex: 1; min-width: 200px; } .rp-shoprate__tx b { display: block; font-size: var(--rp-text-base); color: var(--rp-ink-800); font-weight: var(--rp-w-semibold); margin-bottom: 2px; } .rp-shoprate__tx span { font-size: var(--rp-text-sm); color: var(--rp-ink-400); line-height: 1.5; } /* ===== Шапка/подвал/нижнее меню ===== * Кит рисует ДВЕ разные шапки (мобильную MTop и десктопную DHead) — это не один * элемент, который переверстывается медиа-запросом, а два разных дерева разметки * в DOM одновременно. Переключаем через display, не трогая display самих * компонентов кита (.k-dhead/.k-dnav/.k-tabbar уже задают его сами). */ .rp-desktop-only { display: block; } .rp-mobile-only { display: none; } @media (max-width: 820px) { .rp-desktop-only { display: none; } .rp-mobile-only { display: block; } } /* Бургер на графитовой шапке телефона — бары были тёмно-серыми на белом фоне, на графите нужны белые. */ .k-mtop .container-burger-cm div { background-color: #fff; } /* Бейдж счётчика над иконками сердце/корзина в мобильной шапке (kit — inline style в исходнике, здесь — классом, чтобы не дублировать в каждом шаблоне). */ .rp-tabcnt { position: absolute; top: -5px; right: -7px; background: var(--rp-brand-600); color: #fff; font-size: 9px; min-width: 15px; height: 15px; border-radius: 9px; display: grid; place-items: center; font-weight: 600; padding: 0 3px; line-height: 1; } /* Дропдаун профиля в десктопной шапке — в ките это статичная иконка без выпадашки, у нас за ней реальный вход/выход/админка, поэтому меню дорисовано по месту. */ .rp-profile-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); box-shadow: var(--rp-shadow-lg); padding: 6px; min-width: 210px; z-index: 50; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, visibility .15s, transform .15s; } .profile-dropdown:hover .rp-profile-menu, .profile-dropdown:focus-within .rp-profile-menu { opacity: 1; visibility: visible; transform: translateY(0); } .rp-profile-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--rp-ink-700); text-decoration: none; } .rp-profile-menu a:hover { background: var(--rp-ink-50); } /* Нижнее меню кита рассчитано на