/* ========================================================================== SUSHILIKE — тема без Bootstrap и jQuery ========================================================================== */ /* ========================================================================== ШРИФТЫ И ИКОНКИ — ВЛИТЫ СЮДА ИЗ ОТДЕЛЬНЫХ ФАЙЛОВ -------------------------------------------------------------------------- Было три отдельных в : nunito.css, playfair.css и sushilike-icons.css. Две причины объединить: 1) Пути в src были заданы относительно ЭТОГО файла (fonts/nunito/...), а файлы лежали в fonts/nunito/ и fonts/playfair/ — браузер искал их по fonts/nunito/fonts/nunito/... и получал 404. Шрифты не загружались вообще, страница рисовалась подстановочными. 2) На медленном 4G каждый отдельный CSS в — это лишний круг запроса, а он блокирует первую отрисовку. Здесь это три круга из четырёх. Файлы fonts/nunito/nunito.css, fonts/playfair/playfair.css и fonts/fontawesome/css/sushilike-icons.css больше не подключаются и их можно удалить. ========================================================================== */ /* Шрифт Nunito — размещён у себя вместо fonts.googleapis.com/fonts.gstatic.com. Убирает 2 внешних домена из цепочки загрузки (лишние DNS lookup + TCP/TLS соединения), которые ощутимо тормозили первую отрисовку страницы (FCP/LCP по данным PageSpeed Insights). unicode-range стандартный (как у самого Google Fonts) — браузер сам выберет нужный файл (кириллица или латиница) по составу текста на странице, а не загрузит оба сразу. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nunito/nunito-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nunito/nunito-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/nunito/nunito-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/nunito/nunito-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito/nunito-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito/nunito-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/nunito/nunito-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/nunito/nunito-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Playfair Display — элегантный засечный шрифт для заголовков. Размещён у себя (та же логика, что и с Nunito) — не грузим внешний Google Fonts. Только 2 начертания (700/800), т.к. заголовки не нуждаются в полном наборе весов. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/playfair/playfair-display-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/playfair/playfair-display-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/playfair/playfair-display-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/playfair/playfair-display-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Минимальный набор FontAwesome — только реально используемые на сайте иконки (38 solid + 1 regular + 1 brand), вместо полного набора на тысячи иконок. Экономия: ~250KB шрифтов -> ~5KB. */ @font-face { font-family: "Font Awesome 7 Free"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"); } @font-face { font-family: "Font Awesome 7 Free"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"); } @font-face { font-family: "Font Awesome 7 Brands"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"); } .fa-solid, .fa-regular, .fa-brands, .fa { --_fa-family: var(--fa-family, var(--fa-style-family, 'Font Awesome 7 Free')); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-family: var(--_fa-family); font-style: normal; font-weight: var(--fa-style, 900); line-height: 1; text-align: center; text-rendering: auto; } .fa-solid, .fa-regular, .fa-brands, .fa { font-weight: var(--fa-style, 900); } .fa-solid::before, .fa-regular::before, .fa-brands::before, .fa::before { content: var(--fa); } .fa-regular { --fa-style: 400; } .fa-brands { font-family: "Font Awesome 7 Brands"; --fa-style: 400; } .fa-arrow-left { --fa: "\f060"; } .fa-arrow-right-arrow-left { --fa: "\f0ec"; } .fa-bars { --fa: "\f0c9"; } .fa-cart-shopping { --fa: "\f07a"; } .fa-chevron-down { --fa: "\f078"; } .fa-chevron-left { --fa: "\f053"; } .fa-chevron-right { --fa: "\f054"; } .fa-circle-check { --fa: "\f058"; } .fa-circle-info { --fa: "\f05a"; } .fa-circle-minus { --fa: "\f056"; } .fa-clock { --fa: "\f017"; } .fa-cloud-arrow-down { --fa: "\f0ed"; } .fa-download { --fa: "\f019"; } .fa-envelope { --fa: "\f0e0"; } .fa-floppy-disk { --fa: "\f0c7"; } .fa-heart { --fa: "\f004"; } .fa-house { --fa: "\f015"; } .fa-location-dot { --fa: "\f3c5"; } .fa-lock { --fa: "\f023"; } .fa-magnifying-glass { --fa: "\f002"; } .fa-magnifying-glass-plus { --fa: "\f00e"; } .fa-minus { --fa: "\f068"; } .fa-minus-circle { --fa: "\f056"; } .fa-money-bill-wave { --fa: "\f53a"; } .fa-moon { --fa: "\f186"; } .fa-pencil { --fa: "\f303"; } .fa-plus { --fa: "\+"; } .fa-plus-circle { --fa: "\f055"; } .fa-receipt { --fa: "\f543"; } .fa-reply { --fa: "\f3e5"; } .fa-rotate { --fa: "\f2f1"; } .fa-rotate-left { --fa: "\f2ea"; } .fa-star { --fa: "\f005"; } .fa-trash { --fa: "\f1f8"; } .fa-trash-can { --fa: "\f2ed"; } .fa-upload { --fa: "\f093"; } .fa-user { --fa: "\f007"; } .fa-wand-magic-sparkles { --fa: "\e2ca"; } .fa-xmark { --fa: "\f00d"; } .fa-vk { --fa: "\f189"; } :root { --sl-bg: #F9F6F0; --sl-primary: #EF6B52; /* фирменный коралловый — совпадает с цветом "Лайк" в логотипе (logo_rus.svg), который мы не можем менять через CSS */ --sl-primary-dark: #D85C45; --sl-primary-text: #B3503D; /* затемнён под контраст 4.5:1 для использования как цвет ТЕКСТА (не фона) — WCAG AA */ --sl-dark: #1A1A1A; --sl-dark-2: #2A2A2A; --sl-muted: #746C67; --sl-green: #4D7C42; --sl-green-button: #4D7C42; --sl-green-dark: #588f4c; --sl-beige: #E8C69F; --sl-beige-dark: #ddb589; --sl-orange: #C8332C; --sl-border: #EFEAE2; --sl-card-bg: #fff; --sl-radius-lg: 24px; --sl-radius-md: 16px; --sl-radius-sm: 12px; --sl-shadow: 0 5px 20px rgba(0,0,0,0.06); --sl-header-bg: #FAFAF8; --text-color: var(--sl-dark); --sl-ink: #2A2522; /* всегда тёмный акцент (кнопки/иконки/полосы) — не переключается темой */ } /* ========================================================================== Тёмная тема — включается САМА, если у человека в телефоне/компьютере стоит тёмный режим. Ничего нажимать не нужно, никакой кнопки — браузер сообщает сайту системную настройку через prefers-color-scheme, а у нас весь дизайн и так был на CSS-переменных, так что достаточно один раз переопределить сами переменные. ========================================================================== */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --sl-bg: #17140F; --sl-card-bg: #241F1A; --sl-border: #3A342C; --sl-muted: #A89E90; --sl-dark: #F0EBE3; --sl-header-bg: #241F1A; --sl-primary: #EF6B52; /* тёмной теме больше идёт прежний мягкий коралловый — острый красный+углы там смотрелись хуже */ --sl-primary-dark: #D85C45; --sl-primary-text: #EF6B52; --sl-green: #709667; --sl-radius-lg: 24px; --sl-radius-md: 16px; --sl-radius-sm: 12px; } } /* Тот же набор — но включается явным выбором через кнопку-переключатель, независимо от системной темы устройства (например, у системы светлая, а человек всё равно хочет тёмную на сайте, и наоборот). */ html[data-theme="dark"] { --sl-bg: #17140F; --sl-card-bg: #241F1A; --sl-border: #3A342C; --sl-muted: #A89E90; --sl-dark: #F0EBE3; --sl-header-bg: #241F1A; --sl-primary: #EF6B52; --sl-primary-dark: #D85C45; --sl-primary-text: #EF6B52; --sl-green: #709667; --sl-radius-lg: 24px; --sl-radius-md: 16px; --sl-radius-sm: 12px; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sl-hero, html:not([data-theme="light"]) .sl-header-inner, html:not([data-theme="light"]) .sl-cat-grid-section, html:not([data-theme="light"]) .sl-product-card, html:not([data-theme="light"]) .sl-footer, html:not([data-theme="light"]) .sl-benefit, html:not([data-theme="light"]) .sl-refine, html:not([data-theme="light"]) .sl-cat-intro, html:not([data-theme="light"]) .sl-tabs, html:not([data-theme="light"]) .sl-product-detail, html:not([data-theme="light"]) .sl-empty-category, html:not([data-theme="light"]) .sl-quiz-box, html:not([data-theme="light"]) .sl-cart-panel, html:not([data-theme="light"]) .sl-nav-panel { box-shadow: 0 4px 20px rgba(0,0,0,0.3); } /* Затемнение фона делаем чуть плотнее в тёмной теме — иначе разница между и так тёмной страницей и "затемнённым" фоном почти незаметна */ html:not([data-theme="light"]) .body-overlay { background: rgba(0,0,0,0.65); } /* Текст, который приходит из визуального редактора в админке (описания информационных страниц, товаров, адрес магазина), часто содержит встроенные стили типа style="color: black" — Word/копипаст любят такое оставлять. Обычный CSS-класс это не перебьёт, только !important. */ html:not([data-theme="light"]) .sl-content-body, html:not([data-theme="light"]) .sl-content-body *, html:not([data-theme="light"]) .sl-cat-intro-text, html:not([data-theme="light"]) .sl-cat-intro-text *, html:not([data-theme="light"]) .sl-contact-comment, html:not([data-theme="light"]) .sl-contact-comment * { color: var(--sl-dark) !important; background-color: transparent !important; } } /* Та же едва заметная обводка вместо тени — при явном ручном выборе тёмной темы */ html[data-theme="dark"] .sl-hero, html[data-theme="dark"] .sl-header-inner, html[data-theme="dark"] .sl-cat-grid-section, html[data-theme="dark"] .sl-product-card, html[data-theme="dark"] .sl-footer, html[data-theme="dark"] .sl-benefit, html[data-theme="dark"] .sl-refine, html[data-theme="dark"] .sl-cat-intro, html[data-theme="dark"] .sl-tabs, html[data-theme="dark"] .sl-product-detail, html[data-theme="dark"] .sl-empty-category, html[data-theme="dark"] .sl-quiz-box, html[data-theme="dark"] .sl-cart-panel, html[data-theme="dark"] .sl-nav-panel { box-shadow: 0 4px 20px rgba(0,0,0,0.3); } html[data-theme="dark"] .body-overlay { background: rgba(0,0,0,0.65); } html[data-theme="dark"] .sl-content-body, html[data-theme="dark"] .sl-content-body *, html[data-theme="dark"] .sl-cat-intro-text, html[data-theme="dark"] .sl-cat-intro-text *, html[data-theme="dark"] .sl-contact-comment, html[data-theme="dark"] .sl-contact-comment * { color: var(--sl-dark) !important; background-color: transparent !important; } * { box-sizing: border-box; } /* Атрибут hidden должен скрывать элемент всегда. Браузерное правило [hidden] { display: none } — с нулевой специфичностью, и любой наш класс с display: flex/grid его молча перебивал: элемент оставался виден, хотя JS выставил hidden. Из-за этого, например, не скрывалась плашка про доставку при включённом самовывозе. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } /* Отступ сверху у секций-якорей, на которые ведут чипсы меню — иначе заголовок секции спрячется под прилипшей полосой меню при скролле */ .sl-feed-section { scroll-margin-top: 90px; } /* .sl-cart-panel и .sl-nav-panel в закрытом состоянии уезжают за экран через transform: translateX(100%)/(-100%), а не display:none — так работает плавная анимация выезда. Но их исходное место в раскладке (растянутое на всю свою ширину справа/слева) браузер всё равно учитывает при расчёте общей ширины страницы, из-за чего появляется лишняя горизонтальная прокрутка на мобильных, даже когда обе панели закрыты. html/body — единственные элементы, где обрезка по горизонтали безопасна: нужная горизонтальная прокрутка (таблицы сравнения и т.п.) всегда реализована через собственные .sl-*-scroll-обёртки с overflow-x: auto, их это не затронет. */ html, body { overflow-x: hidden; } body { background: var(--sl-bg); color: var(--text-color); font-family: 'Nunito', 'Segoe UI', sans-serif; margin: 0; } a { color: var(--sl-primary-text); text-decoration: none; } a:hover { color: var(--sl-primary-dark); } .container { max-width: 1280px; margin: 0 auto; padding: 0 15px; } img { max-width: 100%; height: auto; } /* ========================================================================== Уведомления (замена bootstrap .alert) ========================================================================== */ .sl-alert-box { position: fixed; top: 16px; right: 16px; z-index: 2000; width: 320px; max-width: calc(100% - 32px); } .sl-alert { background: var(--sl-card-bg); border-radius: var(--sl-radius-sm); box-shadow: var(--sl-shadow); padding: 12px 36px 12px 14px; margin-bottom: 10px; font-size: 14px; position: relative; border-left: 4px solid var(--sl-green); } .sl-alert-danger { border-left-color: #e74c3c; } .sl-alert-close { position: absolute; right: 8px; top: 8px; border: none; background: none; font-size: 16px; cursor: pointer; color: var(--sl-muted); } /* ========================================================================== Дропдауны (замена bootstrap .dropdown) ========================================================================== */ .sl-dropdown { position: relative; } .sl-dropdown-label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: inherit; } .sl-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; background: var(--sl-card-bg); color: var(--sl-dark); border-radius: var(--sl-radius-sm); box-shadow: var(--sl-shadow); min-width: 200px; padding: 6px; z-index: 100; } .sl-dropdown-menu-end { left: auto; right: 0; } .sl-dropdown.open .sl-dropdown-menu { display: block; } .sl-account-menu-header { display: none; } .sl-dropdown-item { display: block; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--sl-dark); } .sl-dropdown-item:hover { background: var(--sl-bg); } .sl-dropdown-all { border-top: 1px solid var(--sl-border); margin-top: 4px; padding-top: 8px; font-weight: 700; } .sl-dropdown-divider { border-top: 1px solid var(--sl-border); margin: 6px 0; } .sl-flag { width: 16px; height: 11px; object-fit: cover; vertical-align: middle; } /* ========================================================================== Шапка (Header по макету) — логотип, поиск, телефон+часы, аккаунт, корзина+адрес — всё в одну строку, без отдельной тёмной полосы ========================================================================== */ header { background: transparent; position: relative; /* Выше .sl-sticky-menu-wrap (z-index: 40) — иначе прилипающее меню категорий рисуется поверх середины выпадающих подсказок поиска (у них z-index: 50, но он сравнивается не сам по себе, а через контекст этого header, и раньше он был ниже меню — 10 против 40), из-за чего список визуально "рвался" на две части. */ z-index: 45; } .sl-header-inner { background: var(--sl-header-bg); border-radius: var(--sl-radius-lg); border-bottom: 2px solid var(--sl-primary); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); margin-top: 16px; display: flex; align-items: center; gap: 20px; padding: 16px 24px; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 10px; } .logo a { display: flex; align-items: center; gap: 10px; } .sl-logo-full { max-height: 52px; } .sl-logo-icon { display: none; width: 44px; height: 44px; flex-shrink: 0; } .sl-logo-text-simple { display: none; font-size: 20px; font-weight: 800; color: var(--sl-dark); white-space: nowrap; } .sl-logo-text { font-size: 26px; font-weight: 800; color: var(--sl-primary-text); } .sl-header-search { flex: 1; min-width: 200px; max-width: 480px; } .sl-header-phone-block { text-align: right; } .sl-phone-number { display: block; font-size: 1.2rem; font-weight: 800; color: var(--sl-dark); } .sl-hours-inline { font-size: 12px; color: var(--sl-muted); white-space: nowrap; } .sl-hours-inline i { color: var(--sl-orange); margin-right: 3px; } .sl-hours-badge { display: inline-block; margin-left: 6px; background: #E74C3C; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--sl-radius-sm); } .sl-icon-circle { width: 46px; height: 46px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; position: relative; flex-shrink: 0; } .sl-icon-dark { background: var(--sl-ink); color: #fff; } .sl-icon-light { background: var(--sl-bg); color: var(--sl-dark); border: 1px solid var(--sl-border); } .sl-icon-light:hover { background: var(--sl-border); } .sl-icon-dark:hover { background: #1c1714; } .sl-icon-primary { background: var(--sl-primary); color: #fff; } .sl-icon-primary:hover { background: var(--sl-primary-dark); } .sl-cart-count { position: absolute; top: -4px; right: -4px; background: #fff; color: var(--sl-primary-text); font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: var(--sl-radius-sm); display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--sl-primary); } /* ========================================================================== Поиск ========================================================================== */ .sl-search { display: flex; background: var(--sl-card-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); box-shadow: 0 1px 3px rgba(44, 36, 32, 0.04); overflow: hidden; } .sl-search:focus-within { border-color: var(--sl-primary); } .sl-search-input { flex: 1; height: 46px; background: transparent; border: none; padding: 0 16px; font-size: 14px; font-family: inherit; outline: none; box-shadow: none; /* Цвет текста здесь раньше не задавался — браузер сам подставлял системный "fieldtext" (обычный чёрный), а он не следит за нашей тёмной темой (переменные --sl-dark и т.п.), только за системным color-scheme, который мы нигде не объявляли. Из-за этого фон поля в тёмной теме темнел, а сам вводимый текст оставался чёрным и был не виден. Задаём цвет явно, как у обычных .form-control. */ color: var(--sl-dark); } .sl-search-input::placeholder { color: var(--sl-muted); } .sl-search-btn { border: none; background: var(--sl-dark-2); color: #fff; width: 46px; height: 46px; flex-shrink: 0; cursor: pointer; font-size: 15px; } .sl-search-btn:hover { background: #2e2823; } /* ========================================================================== Меню категорий — светлые чипсы с иконками (как в референс-макете) ========================================================================== */ .sl-menu { background: transparent; } .sl-menu-scroll { display: flex; align-items: center; gap: 16px; overflow-x: auto; padding: 4px 0 16px; margin-top: 0; scrollbar-width: none; } .sl-menu-scroll::-webkit-scrollbar { display: none; } .category-chip { background: var(--sl-card-bg); border-radius: var(--sl-radius-md); padding: 12px 24px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 700; font-size: 15px; color: var(--sl-dark); box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: all .2s; } .category-chip-icon { font-size: 18px; } .category-chip .fa-chevron-down { font-size: 10px; opacity: .6; margin-left: 2px; } .category-chip:hover:not(.active) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); } .category-chip.active, .category-chip:hover { background: var(--sl-primary); color: #fff; } /* ========================================================================== Мега-меню подкатегорий: широкая панель вместо узкого списка, открывается по клику (везде) и по наведению (на десктопе) ========================================================================== */ .sl-megamenu { position: static; } .sl-megamenu-panel { position: fixed; top: 0; left: 0; min-width: 420px; max-width: 560px; padding: 18px 20px; z-index: 500; } .sl-megamenu-header { font-weight: 800; font-size: 15px; color: var(--sl-dark); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--sl-border); } .sl-megamenu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; } .sl-megamenu-item { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--sl-dark); } .sl-megamenu-item:hover { background: var(--sl-bg); color: var(--sl-primary-text); } .sl-megamenu-all { display: inline-block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sl-border); font-weight: 700; font-size: 13px; color: var(--sl-primary-text); width: 100%; } @media (min-width: 1025px) { .sl-megamenu:hover .sl-megamenu-panel { display: block; } } /* ========================================================================== Полоса меню страниц (Главная / информационные страницы) над шапкой ========================================================================== */ .sl-site-menu-bar { background: var(--sl-ink); border-bottom: 1px solid rgba(255,255,255,0.08); } .sl-site-menu-inner { display: flex; gap: 22px; padding: 8px 15px; overflow-x: auto; scrollbar-width: none; } .sl-site-menu-inner::-webkit-scrollbar { display: none; } .sl-site-menu-link { color: #d9d0c4; font-size: 13px; font-weight: 600; white-space: nowrap; } .sl-site-menu-link:hover { color: #fff; } /* ========================================================================== Бургер-кнопка (только мобильные экраны) ========================================================================== */ .sl-burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--sl-border); background: var(--sl-card-bg); color: var(--sl-dark); font-size: 18px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } /* ========================================================================== Мобильная выезжающая панель навигации (страницы + категории) ========================================================================== */ .sl-nav-panel { position: fixed; top: 0; left: 0; width: 320px; max-width: 85%; height: 100%; background: var(--sl-card-bg); box-shadow: 5px 0 20px rgba(0,0,0,0.1); z-index: 1000; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.19,1,0.22,1); } .sl-nav-panel.open { transform: translateX(0); } .sl-nav-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid var(--sl-border); } .sl-nav-panel-body { flex: 1; overflow-y: auto; padding: 12px 0; } .sl-nav-section { padding: 8px 20px; border-bottom: 1px solid var(--sl-border); } .sl-nav-section:last-child { border-bottom: none; } .sl-nav-link { display: block; padding: 10px 0; font-weight: 700; color: var(--sl-dark); font-size: 15px; } .sl-nav-theme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--sl-bg); border: none; border-radius: var(--sl-radius-md); padding: 12px 14px; margin-bottom: 16px; font-weight: 700; font-size: 14px; color: var(--sl-dark); cursor: pointer; } .sl-nav-theme-toggle i { font-size: 18px; color: var(--sl-primary-text); } /* Категории внутри мобильной панели: чипсы превращаются в вертикальный список */ .sl-nav-categories .sl-menu { background: transparent; border: none; box-shadow: none; } .sl-nav-categories .sl-menu-scroll { background: transparent; border-radius: 0; margin-top: 0; flex-direction: column; overflow: visible; padding: 4px 20px; gap: 4px; } .sl-nav-categories .sl-menu-scroll > .sl-dropdown, .sl-nav-categories .sl-menu-scroll > a.category-chip { width: 100%; display: block; } .sl-nav-categories .category-chip { width: 100%; border-radius: 12px; box-shadow: none; color: var(--sl-dark); padding: 10px 8px; white-space: normal; justify-content: flex-start; } .sl-nav-categories .category-chip:hover, .sl-nav-categories .category-chip.active { background: var(--sl-bg); color: var(--sl-dark); } .sl-nav-categories .sl-dropdown-menu { position: static; box-shadow: none; border: none; margin-top: 0; padding-left: 42px; min-width: 0; max-width: none; display: none; } .sl-nav-categories .sl-dropdown.open .sl-dropdown-menu { display: block; } .sl-nav-categories .sl-megamenu-header { display: none; } .sl-nav-categories .sl-megamenu-grid { display: block; } .sl-nav-categories .sl-megamenu-item { padding: 8px 0; border-radius: 0; } .sl-nav-categories .sl-megamenu-all { border-top: none; margin-top: 4px; padding-top: 0; } /* ========================================================================== Hero Banner — тёмный градиент, текст слева, фото справа с плавным исчезновением в градиент (как в референс-макете) ========================================================================== */ .sl-hero { position: relative; border-radius: var(--sl-radius-lg); overflow: hidden; margin: 20px 0; box-shadow: var(--sl-shadow); background: #FAFAF8; } /* Баннер листается перетаскиванием мышью (см. sushilike.js) — показываем это курсором. Во время жеста запрещаем выделение текста и «призрак» картинки, иначе браузер тащит изображение вместо слайда. */ .sl-hero-draggable { cursor: grab; } .sl-hero-draggable.sl-hero-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .sl-hero-image { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .sl-hero-arrow, .sl-hero-dot { cursor: pointer; } .sl-hero-track { position: relative; width: 100%; min-height: 280px; aspect-ratio: 21 / 7; max-height: 380px; } .sl-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; display: flex; } .sl-hero-slide.active { opacity: 1; visibility: visible; } .sl-hero-photo-wrap { position: relative; overflow: hidden; min-width: 0; flex: 0 0 40%; } .sl-hero-content { position: relative; z-index: 2; flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 40px 76px; } .sl-hero-tag { display: block; color: var(--sl-primary-text); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-bottom: 12px; } .sl-hero-title { color: var(--sl-hero-text-color, var(--sl-dark)); font-family: 'Playfair Display', serif; font-size: 2.1rem; line-height: 1.25; font-weight: 800; margin: 0 0 24px; } .sl-hero-btn { display: inline-block; align-self: flex-start; background: var(--sl-primary); color: #fff; padding: 14px 28px; border-radius: var(--sl-radius-sm); font-weight: 800; font-size: 15px; transition: transform .2s; } .sl-hero-btn:hover { background: var(--sl-primary-dark); color: #fff; transform: scale(1.05); } .sl-hero-divider { position: absolute; left: 60%; top: 15%; bottom: 15%; width: 2px; margin-left: -1px; background: var(--sl-primary); z-index: 2; } .sl-hero-badge { position: absolute; left: 60%; bottom: 30px; transform: translateX(-50%); width: 76px; height: 76px; border-radius: 50%; background: var(--sl-primary); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 4px; overflow: hidden; } .sl-hero-badge-number { font-size: 26px; font-weight: 900; line-height: 1.1; } .sl-hero-badge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1.1; } @media (max-width: 767px) { .sl-hero-slide { flex-direction: column; } .sl-hero-content { padding: 20px 16px 20px 44px; } .sl-hero-photo-wrap { flex-basis: 45%; } .sl-hero-divider { display: none; } .sl-hero-badge { width: 56px; height: 56px; left: auto; right: 12px; bottom: 12px; transform: none; } .sl-hero-badge-number { font-size: 18px; } .sl-hero-badge-label { font-size: 8px; } } .sl-hero-slide picture { display: contents; } .sl-hero-photo-wrap { position: relative; overflow: hidden; min-width: 0; } .sl-hero-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* Слайд без отдельного текста — вся нужная информация уже нарисована на самой картинке (например, рекламный баннер "Лови момент!" целиком как готовая графика). Показываем картинку на всю область баннера, без маски и без обрезки в узкую 60%-зону — иначе важные элементы по краям (текст слева, подарок справа) обрезаются или прячутся под тёмный фон баннера. */ .sl-hero-slide-image-only { display: block; padding: 0; background: #FAFAF8; } .sl-hero-slide-image-only .sl-hero-image { right: 0; top: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; mask-image: none; -webkit-mask-image: none; } /* Стрелки — только на десктопе. На телефоне они скрыты (см. медиа-блок ниже), там листание свайпом и по точкам. */ .sl-hero-arrow { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: var(--sl-dark); cursor: pointer; align-items: center; justify-content: center; font-size: 16px; z-index: 5; } .sl-hero-arrow:hover { background: #fff; } .sl-hero-prev { left: 16px; } .sl-hero-next { right: 16px; } /* Слайд — цельная картинка со вшитым текстом: стрелки уходят из центра в нижние углы, чтобы не лежать поверх нарисованных надписей. Класс sl-hero-nav-bottom ставит JS (updateArrowPosition). */ .sl-hero-nav-bottom .sl-hero-arrow { top: auto; bottom: 12px; transform: none; } .sl-hero-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; } .sl-hero-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(0,0,0,0.22); cursor: pointer; padding: 0; } .sl-hero-dot.active { background: var(--sl-primary); width: 24px; border-radius: 5px; } @media (max-width: 767px) { .sl-buy-btn { flex: 1 1 100%; width: 100%; } .sl-hero-track { aspect-ratio: auto; min-height: 220px; max-height: none; } .sl-hero-slide { padding: 24px; align-items: flex-start; justify-content: center; flex-direction: column; } .sl-hero-content { max-width: 100%; } .sl-hero-title { font-size: 1.3rem; margin-bottom: 18px; } .sl-hero-image { right: -20px; top: 0; width: 80%; opacity: .5; } .sl-hero-slide-image-only { padding: 0; } .sl-hero-slide-image-only .sl-hero-image { right: 0; width: 100%; opacity: 1; } /* Стрелки на телефоне перекрывали картинку баннера — убираем. Правило обязано стоять ПОСЛЕ базового .sl-hero-arrow: медиа-запрос не добавляет специфичности, побеждает то, что ниже в файле. */ .sl-hero-arrow { display: none; } .sl-hero-dots { bottom: 10px; gap: 8px; } .sl-hero-dot { width: 10px; height: 10px; } .sl-hero-dot.active { width: 24px; } } /* ========================================================================== Старый вариант hero-banner (сплошная тёмная карточка без фото) — оставлен для совместимости, если где-то ещё используется ========================================================================== */ .hero-banner-wrapper { width: 100%; display: block; } /* ========================================================================== Панель корзины: скрыта по умолчанию везде, открывается по клику ========================================================================== */ .body-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; display: none; } .body-overlay.active { display: block; } .sl-cart-panel { position: fixed; top: 0; right: 0; width: 380px; max-width: 100%; height: 100%; background: var(--sl-card-bg); box-shadow: -5px 0 20px rgba(0,0,0,0.1); z-index: 1000; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.19,1,0.22,1); } .sl-cart-panel.open { transform: translateX(0); } .sl-cart-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; font-size: 1.15rem; font-weight: bold; border-bottom: 1px solid var(--sl-border); } .sl-cart-close { border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--sl-muted); } #cart { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; } #cart-items-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } #cart-items-view[hidden], #quick-checkout-view[hidden] { display: none !important; } .sl-cart-items { flex: 1; overflow-y: auto; } .sl-cart-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sl-border); align-items: flex-start; } .sl-cart-item-thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--sl-radius-sm); } .sl-cart-item-body { flex: 1; min-width: 0; } .sl-cart-item-name { font-weight: 700; color: var(--sl-dark); display: block; font-size: 14px; margin-bottom: 4px; } .sl-cart-item-option { font-size: 12px; color: var(--sl-muted); } .sl-cart-item-row { display: flex; justify-content: space-between; font-size: 13px; margin-top: 6px; color: var(--sl-muted); } .sl-cart-item-total { font-weight: 700; color: var(--sl-dark); text-decoration: none; } .sl-cart-item-remove { border: none; background: none; color: var(--sl-muted); cursor: pointer; font-size: 14px; padding: 4px; } .sl-cart-item-remove:hover { color: #e74c3c; } .sl-cart-totals { border-top: 1px dashed var(--sl-border); padding-top: 12px; margin-top: 12px; } .sl-cart-total-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--sl-muted); text-decoration: none; } .sl-cart-total-grand { font-size: 1.2rem; font-weight: bold; color: var(--sl-dark); text-decoration: none; } .sl-cart-actions { margin-top: 16px; } .btn-checkout { display: block; background-color: var(--sl-green-button); color: #fff; width: 100%; padding: 15px; border-radius: 14px; border: none; font-size: 1.05rem; font-weight: bold; cursor: pointer; text-align: center; transition: background 0.2s; } .btn-checkout:hover { background-color: var(--sl-green-dark); color: #fff; } .sl-cart-view-link { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--sl-muted); } .sl-cart-empty { text-align: center; color: var(--sl-muted); padding: 40px 0; } .sl-cart-empty i { font-size: 40px; margin-bottom: 12px; display: block; color: var(--sl-border); } /* Сайдбар на десктопе: панель встроена в поток, всегда видна, без затемнения */ /* Корзина одинаково ведёт себя на всех экранах: скрыта по умолчанию, открывается по клику на иконку в шапке — как в макете (просто иконка со счётчиком, без постоянно открытой панели). На широких экранах просто чуть уже шторка, чтобы не растягиваться на всю высоту зря. */ @media (min-width: 1025px) { .sl-cart-panel { width: 400px; } } /* ========================================================================== Benefits — три плашки с иконками под баннером ========================================================================== */ .sl-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; } .sl-benefit { background: var(--sl-card-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; } .sl-benefit-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sl-bg); color: var(--sl-primary-text); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .sl-benefit-title { font-weight: 800; font-size: 14px; color: var(--sl-dark); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 4px; } .sl-benefit-text { font-size: 13px; color: var(--sl-muted); line-height: 1.4; } @media (max-width: 900px) { .sl-benefits { grid-template-columns: 1fr; } } /* ========================================================================== Лента категорий (главная целиком) — заголовок секции + скелетоны ========================================================================== */ .sl-feed-section { margin-bottom: 20px; } .sl-feed-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .sl-feed-heading .sl-section-title { margin-bottom: 0; } .sl-feed-all { font-size: 13px; font-weight: 700; color: var(--sl-primary-text); white-space: nowrap; flex-shrink: 0; } .sl-feed-all:hover { color: var(--sl-primary-dark); } .sl-feed-skeleton { aspect-ratio: 4 / 5; border-radius: var(--sl-radius-md); background: linear-gradient(90deg, var(--sl-bg) 25%, #f0e9dc 37%, var(--sl-bg) 63%); background-size: 400% 100%; animation: sl-skeleton-pulse 1.4s ease infinite; } @keyframes sl-skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .sl-feed-error { grid-column: 1 / -1; text-align: center; padding: 24px; color: var(--sl-muted); font-size: 14px; } .sl-feed-error p { margin: 0 0 12px; } /* ========================================================================== Страница товара (product/product.twig) ========================================================================== */ .sl-product-detail { display: grid; grid-template-columns: 420px 1fr; align-items: start; gap: 32px; background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 28px; margin-bottom: 24px; } .sl-product-gallery-main { position: relative; aspect-ratio: 1; border-radius: var(--sl-radius-md); overflow: hidden; background: var(--sl-bg); } .sl-product-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .sl-product-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .sl-gallery-thumb { width: 60px; height: 60px; border-radius: var(--sl-radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--sl-bg); } .sl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .sl-gallery-thumb.active { border-color: var(--sl-primary); } .sl-product-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sl-product-title { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 800; color: var(--sl-dark); margin: 0 0 10px; } .sl-product-weight-lg { color: var(--sl-muted); font-size: 16px; font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-top: 4px; } .sl-product-meta { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; color: var(--sl-muted); } .sl-product-meta li { margin-bottom: 3px; } .sl-product-rating { display: flex; align-items: center; gap: 4px; color: #f5a623; font-size: 14px; margin-bottom: 14px; } .sl-product-rating .fa-regular { color: var(--sl-border); } .sl-rating-link { font-size: 12px; color: var(--sl-muted); margin-left: 8px; } .sl-product-detail-price { margin-bottom: 10px; } .sl-product-detail-price .sl-price-new { font-size: 1.8rem; font-weight: 800; color: var(--sl-dark); } .sl-product-detail-price .sl-price-old { font-size: 1rem; color: var(--sl-muted); text-decoration: line-through; margin-right: 10px; } .sl-price-tax { font-size: 12px; color: var(--sl-muted); } .sl-product-discounts { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; color: var(--sl-muted); } .sl-product-actions-row { margin-bottom: 16px; } .sl-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sl-border); background: var(--sl-card-bg); color: var(--sl-dark); margin-right: 8px; cursor: pointer; } .sl-icon-btn:hover { background: var(--sl-bg); } .sl-options { margin-bottom: 16px; } .sl-options-title { font-size: 15px; font-weight: 800; margin: 0 0 12px; } .sl-form-group { margin-bottom: 14px; } .sl-form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--sl-dark); margin-bottom: 6px; } .sl-required label::after { content: " *"; color: var(--sl-primary-text); } .sl-option-choices { display: flex; flex-direction: column; gap: 6px; } .sl-option-choice { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 14px; cursor: pointer; } .sl-subscription-desc { font-size: 13px; color: var(--sl-muted); margin-top: 6px; } .sl-field-error { color: #e74c3c; font-size: 12px; margin-top: 4px; display: none; } .sl-review-note { font-size: 12px; color: var(--sl-muted); margin-top: 6px; } .sl-rating-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--sl-muted); } .sl-rating-input label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 700; color: var(--sl-dark); } .sl-rating-input input[type="radio"] { accent-color: var(--sl-primary); } .sl-review-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .sl-review-card { background: var(--sl-card-bg); border-radius: var(--sl-radius-md); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 14px 16px; } .sl-review-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .sl-review-card-head strong { color: var(--sl-dark); font-size: 14px; } .sl-review-card-date { font-size: 12px; color: var(--sl-muted); } .sl-review-card-stars { color: var(--sl-primary-text); font-size: 12px; margin-top: 4px; } .sl-review-card-text { font-size: 13px; color: var(--sl-muted); margin: 8px 0 0; line-height: 1.5; } .sl-field-error.sl-field-error-visible { display: block; } .is-invalid { border-color: #e74c3c !important; } .sl-buy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .sl-qty-input { width: 70px; text-align: center; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); font-size: 15px; font-weight: 700; } .sl-buy-btn { flex: 0 0 auto; width: auto; padding: 13px 32px; font-size: 15px; border-radius: var(--sl-radius-sm); box-shadow: 0 4px 14px rgba(103, 166, 89, 0.35); } .sl-buy-btn:hover { box-shadow: 0 6px 18px rgba(103, 166, 89, 0.45); } .sl-detail-stepper .sl-qty-input { border: none; background: none; width: 36px; padding: 0; } .sl-notice { margin-top: 10px; background: var(--sl-bg); color: var(--sl-orange); font-size: 13px; padding: 10px 14px; border-radius: var(--sl-radius-sm); } .sl-tabs { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 24px 28px; margin-bottom: 24px; } .sl-tab-links { display: flex; gap: 8px; border-bottom: 1px solid var(--sl-border); margin-bottom: 18px; flex-wrap: wrap; } .sl-tab-link { padding: 10px 4px; font-size: 14px; font-weight: 700; color: var(--sl-muted); border-bottom: 2px solid transparent; margin-right: 20px; } .sl-tab-link.active { color: var(--sl-primary-text); border-bottom-color: var(--sl-primary); } .sl-tab-pane { display: none; font-size: 14px; color: var(--sl-dark); line-height: 1.7; } .sl-tab-pane.active { display: block; } .sl-tags { font-size: 13px; color: var(--sl-muted); margin-top: 16px; } .sl-spec-table { width: 100%; border-collapse: collapse; } .sl-spec-table td { padding: 8px 10px; border-bottom: 1px solid var(--sl-border); font-size: 14px; } @media (max-width: 900px) { .sl-product-detail { grid-template-columns: 1fr; } } /* ========================================================================== Гид «Не знаю что выбрать» (квиз без ИИ) ========================================================================== */ .sl-quiz-launch-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--sl-primary); color: #fff; border: none; border-radius: var(--sl-radius-sm); padding: 14px 26px; font-weight: 800; font-size: 15px; cursor: pointer; margin: 20px 0; } .sl-quiz-launch-btn:hover { background: var(--sl-primary-dark); } .sl-quiz-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 20px; } .sl-quiz-modal.open { display: flex; } .sl-quiz-box { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow); padding: 32px; width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; position: relative; } #quizOverlay { z-index: 1099; } #quickCheckoutOverlay { z-index: 1099; } .sl-quiz-progress { font-size: 12px; color: var(--sl-muted); font-weight: 700; margin-bottom: 10px; } .sl-quiz-question { font-size: 1.2rem; font-weight: 800; color: var(--sl-dark); margin: 0 0 20px; } .sl-quiz-options { display: flex; flex-direction: column; gap: 10px; } .sl-quiz-option { text-align: left; padding: 14px 18px; border-radius: var(--sl-radius-md); border: 1px solid var(--sl-border); background: var(--sl-bg); font-size: 15px; font-weight: 700; color: var(--sl-dark); cursor: pointer; } .sl-quiz-option:hover { background: var(--sl-primary); color: #fff; border-color: var(--sl-primary); } .sl-quiz-result-also { font-size: 13px; color: var(--sl-muted); margin: -8px 0 14px; } .sl-quiz-result-heading { font-size: 1.1rem; font-weight: 700; color: var(--sl-dark); margin-bottom: 18px; } .sl-quiz-result-heading span { color: var(--sl-primary-text); font-weight: 800; } .sl-quiz-result-grid { margin-bottom: 20px; } .sl-quiz-empty { color: var(--sl-muted); font-size: 14px; } .sl-quiz-restart { width: 100%; } @media (max-width: 560px) { .sl-quiz-box { padding: 24px 20px; } } /* ========================================================================== Быстрое оформление заказа — встроено прямо в панель корзины, без отдельного всплывающего окна поверх (переключаем видимость двух блоков внутри одной и той же выезжающей панели) ========================================================================== */ .sl-quick-checkout-view { padding-top: 4px; } .sl-quick-checkout-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--sl-muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 16px; } .sl-quick-checkout-back:hover { color: var(--sl-primary-text); } .sl-quick-checkout-view .sl-form-group { margin-bottom: 14px; text-align: left; } .sl-quick-checkout-view .sl-quiz-question { text-align: left; margin-bottom: 18px; } .sl-quick-checkout-success { text-align: center; padding: 20px 0; } .sl-quick-checkout-success-icon { font-size: 48px; color: var(--sl-green); margin-bottom: 16px; display: block; } .sl-quick-checkout-success p { color: var(--sl-dark); font-size: 15px; line-height: 1.5; margin: 0 0 20px; } .sl-qc-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--sl-bg); border-radius: var(--sl-radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--sl-dark); font-weight: 700; flex-wrap: wrap; } .sl-qc-summary span { text-decoration: none; } .sl-qc-summary-toggle { background: none; border: none; color: var(--sl-primary-text); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; } .sl-qc-order-list { background: var(--sl-bg); border-radius: var(--sl-radius-sm); padding: 10px 14px; margin: -10px 0 16px; } .sl-qc-order-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--sl-muted); padding: 4px 0; } .sl-cart-delivery-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--sl-muted); padding: 8px 0 4px; line-height: 1.4; } .sl-cart-delivery-note i { color: var(--sl-orange); margin-top: 2px; flex-shrink: 0; } .sl-qc-closed-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--sl-ink); color: #fff; border-radius: var(--sl-radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; } .sl-qc-closed-banner i { color: var(--sl-primary-text); margin-top: 2px; flex-shrink: 0; } .sl-qc-delivery-note { display: flex; align-items: flex-start; gap: 8px; background: var(--sl-bg); border-radius: var(--sl-radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: var(--sl-dark); line-height: 1.5; } .sl-qc-delivery-note i { color: var(--sl-orange); margin-top: 2px; flex-shrink: 0; } /* Галочка «Самовывоз»: заметный блок над адресом, а не мелкий чекбокс — это выбор способа получения заказа, а не второстепенная опция. */ .sl-qc-pickup { display: flex; align-items: flex-start; gap: 10px; background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); padding: 11px 14px; margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--sl-dark); cursor: pointer; } .sl-qc-pickup input { margin: 1px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--sl-primary); cursor: pointer; } /* Подсветка рамкой, когда выбрано. Если браузер не знает :has(), блок просто останется с обычной рамкой — ничего не ломается. */ .sl-qc-pickup:has(input:checked) { border-color: var(--sl-primary); } .sl-qc-pickup-hint { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--sl-muted); } .sl-qc-pickup-note { display: flex; align-items: flex-start; gap: 8px; background: var(--sl-bg); border-radius: var(--sl-radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: var(--sl-dark); line-height: 1.5; } .sl-qc-pickup-note i { color: var(--sl-orange); margin-top: 2px; flex-shrink: 0; } .sl-qc-note { font-size: 12px; color: var(--sl-muted); margin: -4px 0 14px; } .sl-address-autocomplete { position: relative; } .sl-address-suggestions { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--sl-card-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); box-shadow: var(--sl-shadow); list-style: none; padding: 6px; z-index: 50; max-height: 220px; overflow-y: auto; } .sl-address-suggestion { padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--sl-dark); cursor: pointer; } .sl-address-suggestion:hover { background: var(--sl-bg); color: var(--sl-primary-text); } .sl-search-suggestions-list { padding: 6px; } .sl-search-suggestion { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; } .sl-search-suggestion:hover { background: var(--sl-bg); } .sl-search-suggestion img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--sl-radius-sm); flex-shrink: 0; } .sl-search-suggestion-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sl-search-suggestion-name { font-size: 13px; font-weight: 700; color: var(--sl-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-search-suggestion-price { font-size: 12px; color: var(--sl-primary-text); font-weight: 800; } .sl-search-autocomplete { position: relative; } .sl-header-search .sl-search-suggestions-list { top: 100%; } .sl-qc-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--sl-muted); font-weight: 400; cursor: pointer; margin-bottom: 4px; } .sl-qc-consent input { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--sl-primary); cursor: pointer; } .sl-qc-consent a { color: var(--sl-primary-text); } /* ========================================================================== Category Grid — сетка категорий с картинками (модуль sushilike) ========================================================================== */ .sl-cat-grid-section { margin: 20px 0; padding: 24px; border-radius: var(--sl-radius-lg); } .sl-section-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; color: var(--sl-dark); margin-bottom: 18px; } .sl-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .sl-cat-card { display: block; border-radius: var(--sl-radius-md); overflow: hidden; background: var(--sl-card-bg); border: 1px solid var(--sl-border); box-shadow: var(--sl-shadow); transition: transform .2s ease, box-shadow .2s ease; color: var(--sl-dark); } .sl-cat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.1); color: var(--sl-dark); } .sl-cat-card-image { aspect-ratio: 1 / 1; overflow: hidden; } .sl-cat-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-cat-card-name { padding: 12px 14px; font-weight: 700; font-size: 14px; text-align: center; } @media (max-width: 767px) { .sl-cat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .sl-cat-card-name { font-size: 13px; padding: 10px; } } /* ========================================================================== Карточка товара (product/thumb.twig) — используется везде: категории, поиск, похожие товары, модуль "Популярные товары" ========================================================================== */ .sl-product-card { background: var(--sl-card-bg); border: none; border-radius: var(--sl-radius-lg); overflow: visible; height: 100%; /* Карточка — ячейка грида с колонками "1fr": без min-width: 0 её минимальная ширина считается по самому "неломаемому" контенту внутри (например .sl-product-weight и кнопка у нас nowrap). Если в одной карточке такого контента чуть больше, её колонка раздувается за счёт соседней — из-за этого карточки в ряду были разной ширины. */ min-width: 0; display: flex; flex-direction: column; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: transform .2s ease, box-shadow .2s ease; } .sl-product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .sl-product-image { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sl-radius-md); overflow: hidden; margin-bottom: 16px; background: var(--sl-bg); } .sl-product-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-product-badge { position: absolute; top: 12px; left: 12px; background: #FFB703; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: 8px; } .sl-product-badge.spicy { background: #D90429; } .sl-product-body { padding: 0; display: flex; flex-direction: column; flex: 1; } .sl-product-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .sl-product-name { font-size: 18px; margin: 0; /* Резервируем высоту под 2 строки названия ВСЕГДА, даже если оно короткое и уместилось в одну — иначе у карточек с короткими названиями (например "Акита") цена/кнопка ниже (margin-top: auto) повисают со здоровенным пустым отступом, а у карточек с длинными названиями (в 2 строки) — сразу вплотную. line-clamp на случай совсем длинного названия — обрежет многоточием, а не растянет карточку на 3+ строки. */ line-height: 1.3; min-height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sl-product-name a { color: var(--sl-dark); font-weight: 800; } .sl-product-weight { color: var(--sl-muted); font-size: 14px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .sl-product-desc { color: var(--sl-muted); font-size: 13px; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sl-product-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sl-product-price { font-weight: 900; font-size: 22px; color: var(--sl-dark); } .sl-price-old { color: var(--sl-muted); font-weight: 400; text-decoration: line-through; font-size: 13px; margin-left: 4px; } .sl-product-form { margin: 0; } .sl-product-add { border: none; background: var(--sl-primary); color: #fff; cursor: pointer; padding: 10px 22px; border-radius: var(--sl-radius-sm); font-weight: 800; font-size: 14px; flex-shrink: 0; white-space: nowrap; } .sl-product-add:hover { background: var(--sl-primary-dark); } .sl-product-stepper { display: flex; align-items: center; gap: 8px; background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); padding: 4px; } .sl-stepper-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--sl-card-bg); color: var(--sl-dark); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; flex-shrink: 0; } .sl-stepper-btn:hover { background: var(--sl-primary); color: #fff; } .sl-stepper-btn:disabled { opacity: .5; cursor: default; } .sl-stepper-qty { font-weight: 800; font-size: 14px; min-width: 16px; text-align: center; } .sl-product-rating { margin-top: 8px; color: #f5a623; font-size: 12px; } .sl-product-rating .fa-regular { color: var(--sl-border); } .sl-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } @media (max-width: 767px) { /* На мобильном .sl-cat-grid-section (padding: 24px) ещё и вложен в .container (padding: 0 15px) — вместе с боков набегает 39px с каждой стороны, на узком экране это выглядит как огромные поля. Сужаем до 12px, как у карточек внутри. */ .sl-cat-grid-section { padding: 3px; } .sl-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sl-product-card { padding: 10px; } .sl-product-image { margin-bottom: 10px; } .sl-product-body { padding: 0; } .sl-product-desc { display: none; } .sl-product-title-row { margin-bottom: 4px; } .sl-product-name { font-size: 14px; } .sl-product-weight { font-size: 12px; } .sl-product-price { font-size: 16px; } .sl-price-old { font-size: 11px; } /* Кнопка ниже уже растянута на всю ширину (width: 100%), но строка оставалась flex-row с переносом — при точном совпадении по ширине цена+кнопка иногда помещались в одну строку, а на соседней плитке с более длинной ценой/названием — переносились на вторую. Из-за этого высота карточек в одном ряду сетки не совпадала ("плитки не ровные"). Теперь строка всегда в столбец — цена сверху, кнопка на всю ширину под ней, одинаково для всех карточек. */ .sl-product-row { flex-direction: column; align-items: stretch; gap: 6px; } .sl-product-add { padding: 8px 14px; font-size: 13px; width: 100%; text-align: center; } .sl-product-stepper { width: 100%; justify-content: center; } } /* ========================================================================== Аккаунт: вход/регистрация (account/login.twig, register.twig) ========================================================================== */ .sl-account-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sl-account-card { display: flex; flex-direction: column; } .sl-account-card-lead { font-weight: 700; color: var(--sl-dark); margin: 0 0 6px; } .sl-account-card-text { color: var(--sl-muted); font-size: 14px; margin: 0 0 16px; } .sl-account-card .btn-checkout, .sl-account-card .sl-btn { margin-top: auto; } .sl-account-forgot { display: block; font-size: 12px; margin-top: 6px; } @media (max-width: 767px) { .sl-account-two-col { grid-template-columns: 1fr; } } /* ========================================================================== Информационные страницы (information/information.twig, contact.twig, sitemap.twig) ========================================================================== */ .sl-content-page { } .sl-content-body { color: var(--sl-dark); line-height: 1.7; font-size: 15px; } .sl-content-body img { max-width: 100%; height: auto; border-radius: var(--sl-radius-md); } .sl-content-body table { width: 100%; border-collapse: collapse; margin: 16px 0; } .sl-content-body table td, .sl-content-body table th { border: 1px solid var(--sl-border); padding: 8px 10px; } /* Текст этих страниц набирается в админке, часто вставкой из Word или из старого шаблона. Оттуда приезжает мусор, ломающий вёрстку на узком экране: длинные цепочки   (не имеют точек переноса и держат строку в одну неразрывную ленту), таблицы с width="700", инлайновые font-family и color. Ниже — защита от этого. overflow-wrap: anywhere разрешает перенос внутри такой «ленты»; обычные слова он не рвёт — правило включается только когда строка иначе не вмещается. */ .sl-content-body { overflow-wrap: anywhere; } .sl-content-body img, .sl-content-body iframe, .sl-content-body video, .sl-content-body table { max-width: 100% !important; } .sl-content-body td, .sl-content-body th { word-break: break-word; } .sl-content-body pre { overflow-x: auto; } /* Инлайновый цвет текста из админки (обычно rgb(59,59,59) — почти чёрный) в тёмной теме сливается с фоном. Перебиваем: !important здесь единственный способ, цвет приходит атрибутом style. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sl-content-body [style*="color"] { color: var(--sl-dark) !important; } } html[data-theme="dark"] .sl-content-body [style*="color"] { color: var(--sl-dark) !important; } /* Таблицу оборачивает JS (sushilike.js) — так она остаётся таблицей и просто прокручивается по горизонтали, вместо того чтобы ломать вёрстку или сжимать столбцы в нечитаемую кашу. */ .sl-content-table-scroll { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; } .sl-content-table-scroll > table { margin: 0; } @media (max-width: 767px) { .sl-content-table-scroll > table { min-width: 460px; } .sl-content-body table td, .sl-content-body table th { padding: 6px 8px; font-size: 14px; } } /* ========================================================================== Страница контактов (information/contact.twig) ========================================================================== */ .sl-contact-tagline { margin: -12px 0 22px; font-size: 15px; color: var(--sl-muted); } /* Верх страницы: контакты + карта в одну строку. Карта — единственный крупный визуальный объект на странице, поэтому она вынесена наверх и занимает почти половину ширины. */ .sl-contact-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; margin-bottom: 16px; } .sl-contact-primary { /* Лёгкая коралловая подложка вместо белой: страница из одних белых карточек выглядит однородной, а этот блок — главный. */ background: linear-gradient(160deg, rgba(239,107,82,0.10), rgba(239,107,82,0.03)); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); padding: 26px; } .sl-contact-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-muted); margin-bottom: 6px; } .sl-contact-phone { display: inline-block; font-family: 'Playfair Display', serif; font-size: 2.15rem; font-weight: 800; line-height: 1.1; /* --sl-primary-text, а не --sl-primary: фирменный коралловый как цвет ТЕКСТА не проходит контраст WCAG AA, для текста есть затемнённый. */ color: var(--sl-primary-text); margin-bottom: 18px; } .sl-contact-phone:hover { color: var(--sl-primary-dark); } .sl-contact-facts { list-style: none; padding: 0; margin: 0 0 20px; } .sl-contact-facts li { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid var(--sl-border); font-size: 14px; line-height: 1.55; color: var(--sl-dark); } .sl-contact-facts li i { color: var(--sl-primary); margin-top: 3px; flex-shrink: 0; width: 16px; text-align: center; } .sl-contact-facts em { font-style: normal; font-size: 13px; color: var(--sl-muted); } .sl-contact-facts a { color: var(--sl-primary-text); font-weight: 700; } .sl-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sl-contact-map { position: relative; border-radius: var(--sl-radius-lg); overflow: hidden; border: 1px solid var(--sl-border); min-height: 340px; background: var(--sl-bg); } .sl-contact-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; } .sl-contact-map-link { position: absolute; left: 12px; bottom: 12px; background: var(--sl-card-bg); border-radius: var(--sl-radius-sm); padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--sl-dark); box-shadow: var(--sl-shadow); } .sl-contact-map-link:hover { color: var(--sl-primary-text); } /* Зоны доставки — справочная информация, а не акцент страницы: блок тише формы и контактов. Подложка вместо белой карточки с тенью, мелкий шрифт, нейтральные рамки вместо коралловых полос. */ .sl-contact-delivery { background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); padding: 20px; margin-bottom: 16px; } .sl-contact-delivery-head { margin-bottom: 12px; } .sl-contact-delivery-head h2 { font-size: 1rem; font-weight: 800; color: var(--sl-dark); margin: 0 0 3px; } .sl-contact-delivery-head h2 i { color: var(--sl-muted); font-size: 13px; margin-right: 6px; } .sl-contact-delivery-head p { margin: 0; font-size: 12px; color: var(--sl-muted); } .sl-zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .sl-zone { background: var(--sl-card-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); padding: 10px 12px; } .sl-zone-sum { display: block; font-size: 14px; font-weight: 800; color: var(--sl-dark); } .sl-zone-name { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--sl-muted); } .sl-contact-delivery-note { margin: 12px 0 0; font-size: 12px; color: var(--sl-muted); } .sl-contact-comment-box { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow); padding: 24px; margin-bottom: 16px; } .sl-contact-comment { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sl-dark); } /* Низ страницы: форма и реквизиты рядом. Реквизиты — справочный блок, поэтому он визуально тише формы: без тени, на подложке. */ .sl-contact-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .sl-contact-form { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow); padding: 24px; } .sl-contact-requisites { background: var(--sl-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); padding: 24px; } .sl-contact-requisites .sl-section-title { font-size: 1.25rem; margin-bottom: 12px; } .sl-contact-requisites .sl-section-title i { color: var(--sl-primary); font-size: 1rem; margin-right: 6px; } .sl-requisites-list { margin: 0; } .sl-requisites-row { padding: 9px 0; border-bottom: 1px solid var(--sl-border); } .sl-requisites-row:last-child { border-bottom: none; } .sl-requisites-row dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sl-muted); margin-bottom: 2px; } .sl-requisites-row dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--sl-dark); /* Счёт — 20 цифр без пробелов: без этого строка вылезает за карточку. */ overflow-wrap: anywhere; } .sl-contact-submit { width: auto; min-width: 200px; } /* Поле-приманка от спам-ботов (см. contact.twig/contact.php) — прячем не через display:none/visibility:hidden (это боты умеют проверять и обходить), а уводим за пределы экрана. Для человека поле не видно и не фокусируется табом, для бота, который тупо заполняет все inputs на странице, выглядит как обычное текстовое поле. */ .sl-hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 991px) { .sl-contact-top, .sl-contact-bottom { grid-template-columns: 1fr; } .sl-contact-map { min-height: 300px; } } @media (max-width: 767px) { .sl-contact-primary { padding: 20px; } .sl-contact-phone { font-size: 1.7rem; } .sl-contact-actions .sl-btn { flex: 1 1 140px; text-align: center; } .sl-contact-form, .sl-contact-requisites, .sl-contact-comment-box { padding: 18px; } .sl-contact-submit { width: 100%; } } .sl-sitemap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sl-sitemap-list { list-style: none; padding: 0; margin: 0; } .sl-sitemap-list > li { margin-bottom: 8px; font-weight: 700; } .sl-sitemap-list a { color: var(--sl-dark); } .sl-sitemap-list a:hover { color: var(--sl-primary-text); } .sl-sitemap-sublist { list-style: none; padding: 6px 0 0 16px; margin: 0; } .sl-sitemap-sublist li { font-weight: 400; margin-bottom: 4px; } @media (max-width: 767px) { .sl-sitemap-grid { grid-template-columns: 1fr; } } /* ========================================================================== Сравнение товаров (product/compare.twig) ========================================================================== */ .sl-compare-table-wrap { overflow-x: auto; } .sl-compare-table { width: 100%; border-collapse: collapse; } .sl-compare-table td { border: 1px solid var(--sl-border); padding: 10px 14px; vertical-align: top; font-size: 14px; color: var(--sl-dark); } .sl-compare-table td:first-child { font-weight: 700; color: var(--sl-muted); white-space: nowrap; background: var(--sl-bg); } .sl-compare-image { width: 100px; height: 100px; object-fit: cover; border-radius: var(--sl-radius-md); } .sl-compare-price-new { font-weight: 800; color: var(--sl-primary-text); } .sl-compare-desc { max-width: 260px; font-size: 13px; color: var(--sl-muted); } .sl-compare-actions { margin-bottom: 8px; } .sl-compare-remove { color: #e74c3c; font-size: 13px; } /* ========================================================================== Личный кабинет — общее (account/account.twig, address, wishlist, order) ========================================================================== */ .sl-account-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .sl-account-tile { display: flex; align-items: center; gap: 10px; background: var(--sl-card-bg); border-radius: var(--sl-radius-md); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 14px 16px; font-weight: 700; color: var(--sl-dark); font-size: 14px; } .sl-account-tile i { color: var(--sl-primary-text); font-size: 16px; } .sl-account-tile:hover { color: var(--sl-primary-text); } .sl-address-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .sl-address-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--sl-card-bg); border-radius: var(--sl-radius-md); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 14px 16px; } .sl-address-card-text { font-size: 14px; color: var(--sl-dark); line-height: 1.5; } .sl-address-default-badge { display: inline-block; margin-left: 8px; background: var(--sl-green-button); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--sl-radius-sm); } .sl-address-card-actions { display: flex; gap: 8px; flex-shrink: 0; } .sl-address-delete-form { display: contents; } .sl-wishlist-actions button { width: 100%; } .sl-order-card { display: flex; align-items: center; gap: 14px; background: var(--sl-card-bg); border-radius: var(--sl-radius-md); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 14px 16px; color: var(--sl-dark); } .sl-order-card:hover { box-shadow: 0 4px 14px rgba(44, 36, 32, 0.12); } .sl-order-card-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sl-order-card-number { font-weight: 800; } .sl-order-card-date { font-size: 12px; color: var(--sl-muted); } .sl-order-card-status { font-size: 13px; color: var(--sl-muted); flex-shrink: 0; } .sl-order-card-total { font-weight: 800; color: var(--sl-primary-text); flex-shrink: 0; } .sl-order-card i { color: var(--sl-muted); font-size: 12px; } @media (max-width: 767px) { .sl-order-card { flex-wrap: wrap; } .sl-order-card-main { flex-basis: 100%; } } .sl-order-history-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .sl-order-history-item { background: var(--sl-card-bg); border-radius: var(--sl-radius-md); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 12px 16px; font-size: 13px; } .sl-order-history-date { color: var(--sl-muted); font-size: 12px; } .sl-order-history-status { font-weight: 700; color: var(--sl-dark); margin-top: 2px; } .sl-order-history-comment { color: var(--sl-muted); margin-top: 4px; } .sl-order-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .sl-order-info-grid strong { font-size: 13px; color: var(--sl-muted); } .sl-order-info-grid p { margin: 6px 0 0; font-size: 14px; color: var(--sl-dark); } @media (max-width: 767px) { .sl-order-info-grid { grid-template-columns: 1fr; } } /* ========================================================================== Страница корзины целиком (checkout/cart.twig, cart_list.twig) ========================================================================== */ .sl-inline-alert { border-radius: var(--sl-radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; border-left: 4px solid var(--sl-green); background: var(--sl-card-bg); } .sl-inline-alert-danger { border-left-color: #e74c3c; } .sl-inline-alert-info { border-left-color: var(--sl-orange); } .sl-full-cart-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .sl-full-cart-item { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 16px; display: flex; align-items: center; gap: 14px; } .sl-full-cart-thumb { flex-shrink: 0; } .sl-full-cart-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--sl-radius-md); } .sl-full-cart-body { flex: 1; min-width: 0; } .sl-full-cart-name { font-weight: 800; color: var(--sl-dark); font-size: 15px; } .sl-full-cart-nostock { color: #e74c3c; font-size: 12px; font-weight: 700; margin-left: 8px; } .sl-full-cart-option { font-size: 12px; color: var(--sl-muted); margin-top: 2px; } .sl-full-cart-price-row { margin-top: 6px; display: flex; gap: 8px; align-items: center; } .sl-full-cart-price { font-weight: 800; color: var(--sl-dark); } .sl-full-cart-total { font-size: 13px; color: var(--sl-muted); } .sl-full-cart-qty-form { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .sl-full-cart-stepper { flex-shrink: 0; } .sl-full-cart-update { border: none; background: var(--sl-bg); color: var(--sl-dark); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 4px; } .sl-full-cart-update:hover { background: var(--sl-primary); color: #fff; } .sl-full-cart-remove-form { display: contents; } .sl-full-cart-remove { border: none; padding: 0; cursor: pointer; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--sl-bg); color: var(--sl-muted); display: flex; align-items: center; justify-content: center; } .sl-full-cart-remove:hover { background: #e74c3c; color: #fff; } .sl-full-cart-totals { max-width: 360px; margin-left: auto; margin-bottom: 20px; } .sl-full-cart-next-text { color: var(--sl-muted); font-size: 14px; margin-bottom: 16px; } .sl-full-cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .sl-full-cart-actions .btn-checkout { flex: 1; max-width: 320px; margin-left: auto; } @media (max-width: 767px) { .sl-full-cart-item { flex-wrap: wrap; } .sl-full-cart-thumb img { width: 56px; height: 56px; } .sl-full-cart-body { flex-basis: 100%; order: 1; } .sl-full-cart-qty-form { order: 2; } .sl-full-cart-remove { order: 3; } .sl-full-cart-totals { max-width: none; margin-left: 0; } .sl-full-cart-actions { flex-direction: column-reverse; align-items: stretch; } .sl-full-cart-actions .btn-checkout { max-width: none; margin-left: 0; } } /* ========================================================================== Страница поиска (product/search.twig) ========================================================================== */ .sl-search-panel { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 24px; margin-bottom: 20px; } .sl-search-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; } .sl-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sl-muted); margin-top: 8px; font-weight: 400; } .sl-checkbox-label input[type="checkbox"] { accent-color: var(--sl-primary); cursor: pointer; } .sl-search-panel-actions { text-align: right; } .sl-search-empty { text-align: center; } .sl-search-empty-actions { margin-bottom: 24px; } .sl-home-quiz { text-align: center; } .sl-home-quiz-text { color: var(--sl-muted); font-size: 14px; margin: 0 0 16px; } @media (max-width: 767px) { .sl-search-panel-row { grid-template-columns: 1fr; } } /* ========================================================================== Страница категории (product/category.twig) ========================================================================== */ .sl-page-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 800; color: var(--sl-dark); margin: 4px 0 20px; } .sl-cat-intro { display: flex; gap: 20px; align-items: flex-start; background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 20px 24px; margin-bottom: 20px; } .sl-cat-intro-image { width: 140px; height: 140px; object-fit: cover; border-radius: var(--sl-radius-md); flex-shrink: 0; } .sl-cat-intro-text { font-size: 14px; color: var(--sl-muted); line-height: 1.6; } .sl-refine { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 20px 24px; margin-bottom: 20px; } .sl-refine-title { font-size: 15px; font-weight: 800; color: var(--sl-dark); margin: 0 0 12px; } .sl-refine-list { display: flex; flex-wrap: wrap; gap: 8px; } .sl-refine-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sl-dark); background: var(--sl-bg); border-radius: var(--sl-radius-sm); padding: 7px 16px 7px 7px; } .sl-refine-item-no-image { padding-left: 16px; } .sl-refine-item-image { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .sl-refine-item:hover { background: var(--sl-primary); color: #fff; } .sl-list-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 16px; } .sl-list-toolbar-field { display: flex; flex-direction: column; gap: 4px; } .sl-list-toolbar-field label { font-size: 12px; color: var(--sl-muted); font-weight: 600; } .sl-list-toolbar-field .form-control { min-width: 180px; } .sl-compare-link { margin-left: auto; text-decoration: none; } .sl-list-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .sl-list-results { font-size: 13px; color: var(--sl-muted); } .sl-empty-category { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 40px 24px; text-align: center; } .sl-empty-category p { color: var(--sl-muted); margin-bottom: 16px; } .sl-empty-suggest { font-size: 14px; } .sl-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .sl-search-filters { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 2px 8px rgba(44, 36, 32, 0.06); padding: 24px; margin-bottom: 20px; } .sl-search-filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; } .sl-search-checkbox { margin-top: 8px; } @media (max-width: 767px) { .sl-search-filters-row { grid-template-columns: 1fr; } } @media (max-width: 767px) { .sl-cat-intro { flex-direction: column; } .sl-cat-intro-image { width: 100%; height: 160px; } .sl-compare-link { margin-left: 0; width: 100%; text-align: center; } .sl-list-toolbar { flex-direction: column; align-items: stretch; gap: 12px; } .sl-list-toolbar-field .form-control { min-width: 0; width: 100%; } .sl-refine, .sl-cat-intro, .sl-search-filters, .sl-search-panel { padding: 16px; } } /* ========================================================================== Модуль Account (список ссылок личного кабинета) — стандартные bootstrap классы list-group/list-group-item, оформляем компактной строкой чипов ========================================================================== */ .list-group { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0; } .list-group-item { background: var(--sl-card-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); padding: 7px 16px; font-size: 13px; color: var(--sl-muted); white-space: nowrap; } .list-group-item:hover { background: var(--sl-ink); border-color: var(--sl-ink); color: #fff; } /* ========================================================================== Куки-баннер ========================================================================== */ .sl-cookie { position: fixed; bottom: 0; left: 0; right: 0; background: var(--sl-ink); color: #fff; z-index: 1500; padding: 14px 0; } .sl-cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sl-cookie p { margin: 0; font-size: 14px; } .sl-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; } /* ========================================================================== Универсальные кнопки ========================================================================== */ .sl-btn { display: inline-block; border: none; border-radius: var(--sl-radius-sm); padding: 10px 22px; font-weight: 700; cursor: pointer; font-size: 14px; } .sl-btn-primary { background: var(--sl-primary); color: #fff; } .sl-btn-primary:hover { background: var(--sl-primary-dark); color: #fff; } .sl-btn-light { background: var(--sl-card-bg); color: var(--sl-dark); border: 1px solid var(--sl-border); } .sl-loading { opacity: .6; pointer-events: none; } /* ========================================================================== Хлебные крошки / пагинация ========================================================================== */ .sl-breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 0; margin: 0; font-size: 13px; color: var(--sl-muted); } .sl-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--sl-muted); } .sl-pagination { list-style: none; display: flex; gap: 6px; padding: 20px 0; margin: 0; } .sl-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--sl-radius-sm); background: var(--sl-card-bg); border: 1px solid var(--sl-border); color: var(--sl-dark); font-size: 14px; } .sl-page-active { background: var(--sl-primary); border-color: var(--sl-primary); color: #fff; } /* ========================================================================== Простая сетка для страниц, которые ещё используют колонки (success, maintenance и любые другие не переделанные шаблоны каталога/аккаунта) ========================================================================== */ .sl-row { display: flex; flex-wrap: wrap; gap: 24px; } .sl-col-content { flex: 1; min-width: 0; } .sl-col { width: 260px; flex-shrink: 0; } .sl-col-left { order: -1; } .sl-text-end { text-align: right; } @media (max-width: 900px) { /* Было flex-direction: column — в некоторых мобильных браузерах (в т.ч. Samsung Internet) растягивание дочернего .sl-col-content по ширине (align-items: stretch) в колоночном flex-направлении срабатывает некорректно: блок получает ширину "по содержимому" вместо ширины родителя (у нас были случаи 456px вместо положенных 360px), из-за чего вся сетка товаров вылезала за край экрана. На мобильном просто полностью уходим от flex для этого блока — обычные блочные элементы колонкой друг под другом дают тот же вид, но без этого бага. */ .sl-row { display: block; } .sl-col { width: 100%; } } /* ========================================================================== Совместимость: минимальный набор классов Bootstrap, которые ещё встречаются в НЕ переделанных шаблонах каталога/аккаунта/чекаута (product.twig, category.twig, checkout/*.twig и т.д.). Без него эти страницы останутся совсем без вёрстки, пока вы их не перепишете под новый дизайн. ========================================================================== */ .row { display: flex; flex-wrap: wrap; margin: 0 -12px; } .row > [class*="col"] { padding: 0 12px; } .col { flex: 1 1 0; min-width: 0; } .col-3 { width: 25%; } .col-4 { width: 33.333%; } .col-6 { width: 50%; } .col-8 { width: 66.666%; } .col-9 { width: 75%; } .col-12 { width: 100%; } @media (max-width: 900px) { .row > [class*="col"] { width: 100% !important; } } .d-none { display: none !important; } @media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-inline { display: inline !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } } .btn { display: inline-block; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer; font-size: 14px; text-align: center; } .btn-primary { background: var(--sl-primary); color: #fff; } .btn-light { background: var(--sl-card-bg); color: var(--sl-dark); border: 1px solid var(--sl-border); } .btn-dark { background: var(--sl-ink); color: #fff; } .btn-danger { background: #e74c3c; color: #fff; } .btn-block { display: block; width: 100%; } .text-white { color: #fff; } .table { width: 100%; border-collapse: collapse; } .table-striped tbody tr:nth-child(odd) { background: #faf9f7; } .table-bordered td, .table-bordered th { border: 1px solid var(--sl-border); } .table-sm td, .table-sm th { padding: 6px; } .table td, .table th { padding: 10px; } .breadcrumb { list-style: none; display: flex; gap: 6px; padding: 16px 0; margin: 0; font-size: 13px; } .breadcrumb-item:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--sl-muted); } .pagination { list-style: none; display: flex; gap: 6px; padding: 20px 0; margin: 0; } .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--sl-radius-sm); background: var(--sl-card-bg); border: 1px solid var(--sl-border); color: var(--sl-dark); } .page-item.active .page-link { background: var(--sl-primary); border-color: var(--sl-primary); color: #fff; } /* font-family: inherit обязателен. Браузер не наследует шрифт в поля форм: input берёт системный, а textarea вообще моноширинный — из-за этого текст в полях выглядел чужим на фоне Nunito. */ input, textarea, select, button { font-family: inherit; } .form-control { width: 100%; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); padding: 10px 14px; font-size: 14px; font-family: inherit; background: var(--sl-card-bg); color: var(--sl-dark); } .form-control:focus { outline: none; border-color: var(--sl-primary); } select.form-control { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23847C6E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .list-unstyled { list-style: none; padding: 0; margin: 0; } .img-fluid { max-width: 100%; height: auto; } .img-thumbnail { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); padding: 3px; } .text-center { text-align: center; } .text-end { text-align: right; } .text-nowrap { white-space: nowrap; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mt-2 { margin-top: 8px; } .p-2 { padding: 8px; } .p-4 { padding: 16px; } .w-25 { width: 25%; } /* Bootstrap-дропдауны на нетронутых страницах (аккаунт и т.п.) */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--sl-card-bg); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); box-shadow: var(--sl-shadow); min-width: 180px; padding: 6px; z-index: 100; } .dropdown-menu.show, .dropdown.open .dropdown-menu { display: block; } .dropdown-menu-end { right: 0; left: auto; } .dropdown-item { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--sl-dark); cursor: pointer; } .dropdown-item:hover { background: var(--sl-bg); } .dropdown-divider { border: none; border-top: 1px solid var(--sl-border); margin: 6px 0; } /* ========================================================================== Футер — белая скруглённая карточка (как в референс-макете) ========================================================================== */ .sl-footer-wrap { margin-top: 32px; padding-bottom: 24px; } .sl-footer { background: var(--sl-card-bg); border-radius: var(--sl-radius-lg); box-shadow: 0 -4px 20px rgba(0,0,0,0.02); padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .sl-footer-col h4 { font-size: 16px; font-weight: 900; margin: 0 0 16px; color: var(--sl-dark); } .sl-footer-col p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; } .sl-footer-col a { color: var(--sl-muted); } .sl-footer-col a:hover { color: var(--sl-primary-text); } .sl-footer-logo { font-size: 20px; font-weight: 900; color: var(--sl-dark); margin-bottom: 10px; } .sl-footer-tagline { color: var(--sl-muted); font-size: 14px; line-height: 1.5; } .sl-footer-phone { font-weight: 800; color: var(--sl-dark) !important; font-size: 16px; } .sl-footer-social { display: inline-flex; align-items: center; gap: 6px; } .sl-footer-social i { color: #0077FF; font-size: 15px; } .sl-footer-hours { color: var(--sl-green); font-weight: 700; font-size: 13px; } .sl-footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--sl-border); margin-top: 8px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #aaa; } .sl-footer-bottom a { color: #aaa; } .sl-footer-bottom a:hover { color: var(--sl-primary-text); } @media (max-width: 560px) { .sl-footer { grid-template-columns: 1fr; text-align: center; padding: 24px; } .sl-footer-bottom { flex-direction: column; } } /* ========================================================================== Нижняя навигация на мобильном (Главная/Меню/Корзина/Профиль) ========================================================================== */ .sl-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--sl-card-bg); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); justify-content: space-around; } .sl-mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--sl-muted); font-size: 11px; font-weight: 800; border: none; background: none; cursor: pointer; } .sl-mobile-nav-icon { font-size: 22px; } .sl-mobile-nav-icon-wrap { position: relative; display: inline-flex; } .sl-mobile-cart-count { position: absolute; top: -6px; right: -8px; background: var(--sl-primary); color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: var(--sl-radius-sm); display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; } /* Залогиненный профиль — иконка окрашивается в акцент, чтобы сразу было видно разницу с "Войти" */ .sl-mobile-nav-logged .sl-mobile-nav-icon, .sl-mobile-nav-logged span:last-child { color: var(--sl-primary-text); } .sl-mobile-nav-item.active, .sl-mobile-nav-item:hover { color: var(--sl-primary-text); } /* ========================================================================== Меню категорий "прилипает" к верху при прокрутке — плавно, без JS, стандартным CSS position: sticky. Подложка нужна, чтобы контент под меню не просвечивал сквозь него, когда оно уже прилипло к верху. ========================================================================== */ .sl-sticky-menu-wrap { position: sticky; top: 0; z-index: 40; background: var(--sl-bg); padding: 10px 0; margin: 0 -15px; padding-left: 15px; padding-right: 15px; } .sl-desktop-category-menu .sl-menu-scroll { margin-top: 0; } @media (max-width: 767px) { .sl-sticky-menu-wrap { display: none; } } /* ========================================================================== Адаптив ========================================================================== */ @media (max-width: 767px) { .sl-header-phone-block { display: none; } .sl-header-search { order: 6; flex-basis: 100%; max-width: none; } .sl-burger { display: flex; order: 0; } .sl-site-menu-bar { display: none; } .sl-desktop-category-menu { display: none; } /* Логотип по центру — тот же полноценный файл, что на десктопе, просто меньше по высоте, чтобы вписаться в мобильную шапку */ .sl-header-inner { justify-content: space-between; } .logo { order: 2; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .logo a { display: flex; flex-direction: column; align-items: center; gap: 2px; } .sl-logo-full { max-height: 34px; } /* Упрощённая иконка была временным вариантом, пока в шапке было тесно из-за кнопки темы — теперь её нет в шапке (переехала в выезжающее меню), места достаточно для полноценного лого */ .sl-logo-icon, .sl-logo-text-simple { display: none; } .sl-header-inner > .sl-dropdown { display: none; } #theme-toggle { display: none; } #cart-toggle { order: 4; } .sl-mobile-nav { display: flex; } body { padding-bottom: 78px; } /* Меню аккаунта на мобильном — центрированное окно (как квиз/чекаут), а не выпадашка, привязанная к маленькой иконке. Так оно физически не может уехать за край экрана независимо от того, где находится сама иконка. */ .sl-account-dropdown .sl-dropdown-menu { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 0; width: calc(100vw - 40px); max-width: 340px; max-height: 80vh; overflow-y: auto; z-index: 1100; padding: 20px; border-radius: var(--sl-radius-lg); } .sl-account-dropdown.open .sl-dropdown-menu { display: block; } .sl-account-dropdown.open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1099; } .sl-account-menu-header { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 16px; color: var(--sl-dark); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--sl-border); } .sl-dropdown-item { padding: 12px 4px; font-size: 15px; } }