/* g4questions.css — «Вопросы о товаре» и «Мои вопросы и ответы» как у Озона (волна 7, F5, 04.09.2026). Подключается через local/g4w7/50-reviews.head.php ПОСЛЕ g4site.css и g4dpdp.css, поэтому вкладки «Отзывы | Вопросы» описаны здесь целиком для ВСЕХ ширин (раньше стили вкладок жили в десктопном g4dpdp.css и на мобилке их не было). Палитра сайта: акцент #FF6600, текст #001a34/#1a1a1e, вторичный #8a8a90, разделители #ececf0, радиусы 12/16. Иконки — только линейные SVG. */ /* ── вкладки «Отзывы о товаре N | Вопросы о товаре N» ── */ #g4dqtabs { display: flex; gap: 26px; margin: 30px 0 10px; border-bottom: 1px solid #ececf0; } .g4dqtab { position: relative; padding: 8px 2px 12px; font-size: 20px; font-weight: 700; color: #8a8a90; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; user-select: none; transition: color .12s; white-space: nowrap; /* волна 8, п.27: строчный бокс вкладки задаём явно — чтобы счётчик не мог его растянуть. display НЕ трогаем: вкладка — flex-элемент #g4dqtabs, и её блочность даёт именно он. */ line-height: 24px; } .g4dqtab:hover { color: #1a1a1e; } .g4dqtab.is-on { color: #1a1a1e; border-bottom-color: #FF6600; } /* Счётчик-индекс. Волна 8, п.27 (замер 06.09): было `vertical-align: 7px` при унаследованном line-height 24px — инлайн-бокс счётчика высотой 24px поднимался на 7px и вылезал выше строчного бокса текста, line box вкладки рос с 24 до 29px, а базовая линия текста уезжала вниз на 5px. Вкладка без счётчика (i:empty) оставалась 24px — тексты вставали на разной высоте (скрин 14 владельца). Теперь: line-height 0 (бокс нулевой высоты, line box не растёт) + подъём через position:relative (на раскладку не влияет вовсе). */ .g4dqtab i { font-style: normal; font-size: 12px; color: #9a9aa0; font-weight: 600; margin-left: 4px; line-height: 0; vertical-align: baseline; position: relative; top: -.45em; } .g4dqtab i:empty { display: none; } #g4dqtabs + #g4reviews .g4rev-head h2 { display: none; } /* заголовок теперь во вкладке */ #g4dqtabs + #g4reviews .g4rev-head { justify-content: flex-end; margin-bottom: 10px; } #g4dqtabs + #g4reviews { margin-top: 8px; } #g4dquestions { padding: 10px 0 30px; max-width: 760px; } /* ── сводка, когда у товара есть только ОЦЕНКИ сайта и ни одного текстового отзыва (ревью 05.09: раньше сводки не было вовсе и «отзывов нет» спорило с «131 отзыв» в липкой плашке). Место гистограммы занимает пояснение, столбиков не выдумываем. ── */ .g4rev-nohist { flex: 1 1 260px; max-width: 430px; align-self: center; font-size: 13.5px; line-height: 1.5; color: #8a8a90; } /* то же пояснение, но под гистограммой (там оно третье в ряду и должно занимать свою строку целиком, иначе сжимает столбики) — ревью 06.09 */ .g4rev-nohist--wide { flex: 1 1 100%; max-width: none; align-self: flex-start; } /* ── форма вопроса (серый блок как на Озоне) ── */ .g4qa-ask { position: relative; padding: 20px 22px 18px; background: #f6f7f9; border-radius: 16px; max-width: 640px; } .g4qa-ask__t { font-size: 18px; font-weight: 700; color: #1a1a1e; } .g4qa-ask__s { font-size: 13px; color: #8a8a90; line-height: 1.4; margin: 4px 0 14px; } .g4qa-ask__f { position: relative; } .g4qa-ask textarea, .g4qa-adm__ta, .g4rev-form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 96px; padding: 12px 14px 28px; font: inherit; font-size: 14px; line-height: 1.45; color: #1a1a1e; background: #fff; border: 1px solid #dcdce2; border-radius: 12px; resize: vertical; outline: 0; transition: border-color .12s, box-shadow .12s; -webkit-appearance: none; } .g4qa-ask textarea:focus, .g4qa-adm__ta:focus, .g4rev-form textarea:focus { border-color: #FF6600; box-shadow: 0 0 0 3px rgba(255,102,0,.12); } .g4qa-ask textarea.is-err, .g4qa-adm__ta.is-err { border-color: #e53935; box-shadow: 0 0 0 3px rgba(229,57,53,.15); } .g4qa-ask__cnt { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: #8a8a90; pointer-events: none; } .g4qa-ask__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; min-height: 44px; flex-wrap: wrap; } .g4qa-ask__as { font-size: 14px; color: #1a1a1e; } .g4qa-ask__as b { font-weight: 700; } .g4qa-ask__ok { margin-top: 12px; padding: 12px 16px; background: #eaf8ef; border: 1px solid #bfe3cb; border-radius: 12px; color: #0d7a3a; font-size: 14px; line-height: 1.4; } /* кнопки: НЕ блёклим (disabled владелец читает как «зависло»), отклик — мгновенный */ .g4qa-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 0; border-radius: 12px; background: #FF6600; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, transform .08s; user-select: none; } .g4qa-btn:hover { background: #e65c00; color: #fff; text-decoration: none; } .g4qa-btn:active { transform: scale(.98); } .g4qa-btn--login { padding: 0 20px; white-space: normal; text-align: center; line-height: 1.2; } .g4qa-btn--ghost { background: #eef0f4; color: #1a1a1e; } .g4qa-btn--ghost:hover { background: #e2e5eb; color: #1a1a1e; } .g4qa-btn--green { background: #00A046; } .g4qa-btn--green:hover { background: #008f3c; } /* ── сортировка (пилюли, как у отзывов) и список ── */ .g4qa-sort { margin: 22px 0 6px; } .g4qa-list { border-top: 1px solid #ececf0; } .g4qa-q { padding: 18px 0; border-bottom: 1px solid #ececf0; } .g4qa-q__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .g4qa-q__a { font-weight: 700; font-size: 15px; color: #1a1a1e; } .g4qa-q__d { font-size: 13px; color: #8a8a90; } .g4qa-q__t { margin: 8px 0 10px; font-size: 15px; line-height: 1.5; color: #1a1a1e; white-space: pre-line; word-break: break-word; } .g4qa-q__acts { display: flex; align-items: center; gap: 12px; } .g4qa-tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 6px; letter-spacing: .2px; } .g4qa-tag--mine { background: rgba(255,102,0,.10); color: #e65c00; } .g4qa-tag--wait { background: #fff2e3; color: #b55d00; } .g4qa-tag--ok { background: #e6f6ec; color: #0d8a41; } .g4qa-tag--hid { background: #eef0f4; color: #8a8a90; } .g4qa-tag--rev { background: #eef0f4; color: #1a1a1e; } /* Волна 8, п.28: вопросы с маркетплейсов — плашка источника ТА ЖЕ, что у отзывов (.g4rev-src / --wb / --oz из g4site.css:256), только выравниваем по строке шапки вопроса. */ .g4qa-q__head .g4rev-src { line-height: 1.3; padding: 3px 8px; border-radius: 6px; } /* «палец» — полезный вопрос (переключатель) */ .g4qa-like { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid #e3e3e8; border-radius: 10px; background: #fff; color: #1a1a1e; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s; user-select: none; } .g4qa-like svg { display: block; } .g4qa-like i { font-style: normal; } .g4qa-like:hover { border-color: #FF6600; color: #FF6600; } .g4qa-like.is-on { background: rgba(255,102,0,.10); border-color: transparent; color: #e65c00; } .g4qa-like.is-on svg { fill: rgba(255,102,0,.25); } .g4qa-like.is-static { cursor: default; color: #8a8a90; } .g4qa-like.is-static:hover { border-color: #e3e3e8; color: #8a8a90; } /* ответ магазина */ .g4qa-ans { margin: 12px 0 0; padding: 14px 16px; background: #f6f7f9; border-radius: 12px; } .g4qa-ans__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .g4qa-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #FF6600; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .4px; } .g4qa-ans__by { font-size: 13px; color: #8a8a90; } .g4qa-ans__best { font-size: 12px; font-weight: 700; color: #00A046; } .g4qa-ans__t { margin: 8px 0 10px; font-size: 14.5px; line-height: 1.5; color: #1a1a1e; white-space: pre-line; word-break: break-word; } .g4qa-help { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .g4qa-help__q { font-size: 13px; color: #8a8a90; margin-right: 2px; } .g4qa-pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid #e3e3e8; border-radius: 15px; background: #fff; color: #1a1a1e; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s; user-select: none; } .g4qa-pill i { font-style: normal; color: #8a8a90; } .g4qa-pill:hover { border-color: #FF6600; color: #FF6600; } .g4qa-pill.is-on { background: #1a1a1e; border-color: #1a1a1e; color: #fff; } .g4qa-pill.is-on i { color: rgba(255,255,255,.75); } .g4qa-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: #8a8a90; text-decoration: underline; text-decoration-style: dotted; cursor: pointer; } .g4qa-link:hover { color: #FF6600; } .g4qa-empty { color: #8a8a90; padding: 16px 0; font-size: 14.5px; } .g4qa-more { margin-top: 14px; } /* плашка результата (снизу по центру, как у корзины) */ #g4qaToast { position: fixed; left: 50%; bottom: 28px; z-index: 10070; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: #1a1a1e; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 8px 32px rgba(0,26,52,.16); opacity: 0; transform: translate(-50%, 16px); transition: opacity .18s, transform .18s; pointer-events: none; } #g4qaToast.is-on { opacity: 1; transform: translate(-50%, 0); } #g4qaToast.is-ok { background: #00A046; } /* ── отзывы с сайта в общем списке (reviews.js): плашка GIANT4, «на проверке», подпись формы ── */ /* Волна 8, п.25: «Отзывов о товаре пока нет» — тем же кеглем и цветом, что и строка «Отзывы могут оставлять только те, кто купил товар…» (.g4rev-honest в g4site.css:625: 13px / #8a8a90). В g4site.css:265 у .g4rev-empty размера нет вовсе — наследовались 15px от body и цвет #777 (замер 06.09), из-за чего фраза выглядела крупнее соседней. */ .g4rev-empty { font-size: 13px; color: #8a8a90; padding: 2px 0 6px; } /* line-height НЕ задаём: наследуем те же 24px, что у .g4rev-honest */ .g4rev-src--site { background: #FF6600; } .g4rev-item--pending { opacity: .85; } .g4rev-form__as { font-size: 14px; color: #1a1a1e; margin: 0 0 10px; } .g4rev-form__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .g4rev-form__btn { height: 44px; padding: 0 24px; border-radius: 12px; } .g4rev-form__note { margin-left: 0; } .g4rev-form textarea { max-width: none; margin-bottom: 10px; padding-bottom: 12px; } /* ── админ-режим (ответ магазина, модерация) ── */ .g4qa-adm { margin-top: 12px; padding: 12px 14px; border: 1px dashed #d5d7de; border-radius: 12px; background: #fff; } /* волна 11, п.2 владельца (скрин 6): «плашка со скрепкой почти наезжает на поле — сделай так же, как в ответах на отзывы». Замер 16.09: здесь зазор textarea→скрепка был 0 px, а в форме правки ответа (.g4qa-edit, карандаш — её владелец и видел у своего отзыва с ответом) — 8 px при min-height 72. Теперь поле ответа одинаковое в обеих. */ .g4qa-adm__ta { min-height: 72px; margin-bottom: 8px; padding-bottom: 12px; } .g4qa-adm__row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } /* ── ЛК: /personal/questions/ ── */ .g4qa-page { max-width: 980px; } .g4qa-page__h1 { font-size: 26px; margin: 0 0 14px; } .g4qa-page__loading { color: #8a8a90; } .g4qa-views { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .g4qa-view { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 20px; background: #f2f3f7; font-size: 14.5px; cursor: pointer; user-select: none; color: #1a1a1e; transition: background .12s; } .g4qa-view:hover { background: #e8eaef; } .g4qa-view.is-on { background: #1a1a1e; color: #fff; } .g4qa-view b { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #FF6600; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; } .g4qa-filters { margin: 0 0 6px; } .g4qa-filters .g4rev-sort__b i { font-style: normal; opacity: .7; margin-left: 3px; } .g4qa-group { margin-bottom: 16px; padding: 16px 18px 4px; border: 1px solid #ececf0; border-radius: 16px; background: #fff; } .g4qa-group .g4qa-q:last-child { border-bottom: 0; } .g4qa-admlist .g4qa-q { padding: 18px 0 20px; } .g4qa-prod { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 6px; color: #1a1a1e; text-decoration: none; } .g4qa-prod:hover { color: #FF6600; text-decoration: none; } .g4qa-prod img, .g4qa-prod__noimg { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; border-radius: 10px; background: #f6f7f9; } .g4qa-prod__n { font-size: 14px; font-weight: 600; line-height: 1.35; } .g4qa-q .g4qa-prod { margin-bottom: 10px; } .g4qa-q.is-target { box-shadow: inset 4px 0 0 #FF6600; padding-left: 14px; } .g4qa-r__stars { margin: 4px 0 2px; } .g4qa-empty--page { padding: 28px 0 40px; } .g4qa-empty__t { font-size: 18px; font-weight: 700; color: #1a1a1e; } .g4qa-empty__s { color: #8a8a90; margin: 6px 0 18px; max-width: 520px; line-height: 1.45; } /* ── плитка «Мои вопросы и ответы» в личном кабинете ── Ревью 05.09: у родных плиток ЛК иконка из спрайта темы, у нашей её не было вовсе (шаблон sale.personal.section рисует , а класс был пустой — плитка выходила без картинки и надпись съезжала вверх). Рисуем свою белую иконку того же размера 50×50 — линейный вопрос в облачке, вырезанный маской. */ /* 25.09.2026 (тест Лизы 24.09, п.3 «не имеет рисунка»): белая иконка стояла на светлом фоне плитки (#fafafa) и не была видна — у родных плиток теперь оранжевые линейные иконки. Рисуем такую же: облачко с вопросом, линия 2,5 px цвета темы (#ff6600), без заливки. */ .sale-personal-section-index-block-ico i.fa.g4qa-ico { display: inline-block; width: 50px; height: 50px; font-size: 0; vertical-align: baseline; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none' stroke='%23ff6600' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h30a7 7 0 0 1 7 7v18a7 7 0 0 1-7 7H25l-10 8v-8h-5a7 7 0 0 1-7-7V12a7 7 0 0 1 7-7z'/%3E%3Cpath d='M19.9 15.9a5.2 5.2 0 0 1 10.1 1.7c0 3.5-5 4.3-5 7.3'/%3E%3Cpath d='M25 30.4h.01' stroke-width='3.4'/%3E%3C/svg%3E") center center no-repeat; } /* ── мобильная ширина ── */ @media (max-width: 767px) { /* две вкладки со счётчиками должны влезать в 360px без обреза: 16px и меньший зазор */ #g4dqtabs { gap: 14px; margin: 22px 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #g4dqtabs::-webkit-scrollbar { display: none; } .g4dqtab { font-size: 16px; padding: 6px 2px 10px; } .g4dqtab:last-child { padding-right: 6px; } .g4dqtab i { font-size: 11px; top: -.4em; } /* волна 8, п.27: то же, что на десктопе */ #g4dquestions { max-width: none; padding-top: 6px; } .g4qa-ask { padding: 16px 14px 14px; border-radius: 14px; } .g4qa-ask__t { font-size: 17px; } .g4qa-ask__row { flex-direction: column; align-items: stretch; gap: 10px; } .g4qa-ask .g4qa-btn { width: 100%; height: 48px; } .g4qa-q__t { font-size: 14.5px; } .g4qa-page__h1 { font-size: 22px; } .g4qa-group { padding: 14px 14px 2px; } .g4rev-form__btn { width: 100%; } } /* ═══ Волна 8, раунд 1 (ревью 06.09) ═══ */ /* Метка конца списка вместо кнопки «Показать ещё» (запрет владельца, пп. 17/26/29): IntersectionObserver следит за ней и догружает список. Видимого следа не оставляет. */ .g4rev-end { height: 1px; margin: 0; padding: 0; border: 0; } /* Правка владельца 6-БИС (06.09 17:40): эмодзи в отзывах вернули дословно, а рисует их не системный Segoe UI Emoji, а Noto Color Emoji (COLRv1) — «как в чате с ИИ». Раунд 3: @font-face перенесены СЮДА из отдельного /local/g4fonts/g4emoji.css — тот файл подключался на КАЖДОЙ странице сайта (корзина, оформление, статика) отдельным блокирующим запросом (ревью 06.09, замер 7 241 б); здесь лишнего запроса нет. Раунд 3, ГЛАВНОЕ: unicode-range сужен СТРОГО до эмодзи. В подмножестве Google Fonts № 2 лежали базы keycap — U+23, U+2a, U+30-39, U+a9, U+ae, U+2122, стрелки U+2190-21ff, ♠♣♥♦, ‼ ⁉, геометрия U+25aa-25fe — и цифры в отзывах рисовались шрифтом эмодзи («Тусклая, 2 0 вт», ширина строки «1234567890» 174 px вместо 80 px, замер ревью 06.09). Выброшено 27 элементов диапазонов (скрипт harness/f5r2-narrow.js), эмодзи не задеты: U+1f44d, тон кожи U+1f3fb-1f3ff, U+2764, U+2728, U+2b50, ZWJ U+200d, VS16 U+fe0f. Браузер тянет ТОЛЬКО то подмножество, чьи символы есть на странице; файлы — /local/g4fonts/noto/. */ @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/0.woff2) format('woff2');unicode-range:U+1f1e6-1f1ff} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/1.woff2) format('woff2');unicode-range:U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/2.woff2) format('woff2');unicode-range:U+200d, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27b0, U+27bf, U+2b1b-2b1c, U+2b55, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/3.woff2) format('woff2');unicode-range:U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/4.woff2) format('woff2');unicode-range:U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/5.woff2) format('woff2');unicode-range:U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/6.woff2) format('woff2');unicode-range:U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/7.woff2) format('woff2');unicode-range:U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/8.woff2) format('woff2');unicode-range:U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef} @font-face{font-family:'G4 Emoji';font-style:normal;font-weight:400;font-display:swap;src:url(/local/g4fonts/noto/9.woff2) format('woff2');unicode-range:U+200d, U+2603, U+261d, U+2620, U+2639-263a, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1faf8} /* Базовый шрифт темы — "Open Sans", Arial, sans-serif (bitrix/templates/aspro_next/css/font-1.css). 'G4 Emoji' стоит первым, но после сужения диапазонов берёт только свои эмодзи. */ #g4reviews .g4rev-item__a, #g4reviews .g4rev-part, #g4reviews .g4rev-ans, #g4dquestions .g4qa-q__a, #g4dquestions .g4qa-q__t, #g4dquestions .g4qa-ans__t, .g4qa-page .g4qa-q__t, .g4qa-page .g4qa-ans__t, .g4qa-page .g4qa-q__a { font-family: 'G4 Emoji', "Open Sans", Arial, sans-serif; } /* Ревью 06.09 (раунд 2): строка-пояснение под сортировкой вопросов, когда показан не весь список («Показываем 50 вопросов, всего — 71») — как у отзывов. */ .g4qa-note { margin: -2px 0 10px; } /* ═══ Волна 9 (11.09.2026), F5 ═══ */ /* ═══ Волна 10 (14.09.2026), F3, п.1: сортировка отзывов — РОВНО как на ref/w10/ozon-reviews-sort-zoom.png. Строка текста: «Показать сначала:» тёмным, два текстовых переключателя строчными; активный — оранжевый (акцент сайта), неактивный — серый #70757a; у «с высокой/низкой оценкой» справа «три полоски». Ни рамок, ни фона, ни каретки; под строкой — тонкая линия. Мобилка — та же строка. Прежняя пилюля (.g4srt*) удалена вместе с компонентом G4SRT. */ .g4rsort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; padding: 0 0 16px; border-bottom: 1px solid #ececf0; font-size: 15px; line-height: 20px; color: #1a1a1e; } .g4rsort__l { color: #1a1a1e; } .g4rsort__b { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; color: #70757a; cursor: pointer; user-select: none; transition: color .15s ease-out; -webkit-appearance: none; appearance: none; text-transform: lowercase; } .g4rsort__b:hover { color: #1a1a1e; background: none; } .g4rsort__b.is-on, .g4rsort__b.is-on:hover { color: #FF6600; } .g4rsort__ic { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; } .g4rsort__ic svg { display: block; } /* мобилка: в 360px три надписи в одну строку не помещаются (замер 14.09: перенос оставлял «с высокой оценкой» одну на второй строке) — подпись своей строкой, два переключателя под ней в одну строку */ @media (max-width: 767px) { .g4rsort { gap: 6px 18px; font-size: 14px; padding-bottom: 14px; } .g4rsort__l { flex: 0 0 100%; } .g4rsort__b { font-size: 14px; } } /* волна 10b: у вопросов переключатель один («новые» ⇄ «старые») — на мобилке подпись и он в одну строку */ @media (max-width: 767px) { .g4rsort--q .g4rsort__l { flex: 0 0 auto; } } .g4rsort--q { margin-top: 0; } /* п.2: форма отзыва открыта сразу (только покупателю) — под сводкой, над сортировкой и списком */ #g4revFormWrap { margin: 12px 0 4px; } #g4revFormWrap .g4rev-form { margin: 0; } #g4revFormWrap .g4rev-thanks { margin: 0; } .g4rev-form__ttl { font-size: 18px; } /* п.3: «Прикрепить фото или видео» — компактная кнопка со скрепкой. В g4site.css:645 label был display:block на всю ширину формы (зона клика шире кнопки); теперь label = inline-flex, внутри только кнопка — кликабельная область равна ей. Список файлов — отдельный блок под кнопкой. Волна 10, п.7: та же кнопка в форме ответа магазина (.g4qa-adm, .g4qa-edit) — селекторы без .g4rev-form (этот файл ниже g4site.css в каскаде, специфичность та же — наши правила побеждают). */ .g4rev-f__att { margin: 0 0 10px; } .g4rev-f__files { display: inline-flex; margin: 0; vertical-align: top; cursor: pointer; } .g4rev-f__files input[type=file] { display: none; } .g4rev-f__filebtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; color: #1a1a1e; font-size: 14px; line-height: 1; transition: border-color .12s, color .12s; } .g4rev-f__filebtn svg { display: block; flex: 0 0 18px; } .g4rev-f__filebtn:hover { border-color: #FF6600; color: #FF6600; } .g4rev-f__filelist { display: block; margin: 6px 0 0; font-size: 12.5px; color: #8a8a90; } .g4rev-f__filelist:empty { display: none; } .g4qa-adm .g4rev-f__att, .g4qa-edit .g4rev-f__att { margin: 0; } /* волна 11, п.6 владельца: та же скрепка в форме НОВОГО вопроса — под полем, перед строкой с кнопкой */ .g4qa-ask .g4rev-f__att { margin: 10px 0 0; } /* волна 11, п.7: у выбранного видео в превью — кадр (canvas с