/* g4header.css — волна 7 (04.09.2026), фронт F2: верхняя полоса шапки «как у Озона».
   Подключается из local/g4w7/20-header.head.php (ПОСЛЕ g4site.css — наши правила перекрывают его и тему).
   Замечания владельца: п.13 (пять кнопок разной высоты/цвета, не в линию), п.12/14 (попапы города и
   кабинета под строкой поиска; серая планка над меню), п.30 (подсказки городов). */

/* ═══ п.13: верхняя строка целиком — телефон · адрес · наши пять кнопок ВСЕГДА в одну линию ═══
   Тема раскладывает три блока флоатами: телефон (col-md-4 = 33,33 % ширины), адрес (float:left),
   наш блок (float:right). Наш ряд после волны 7 стал шире (появилась подпись «Избранное»), и на
   1200–1366 px, а с длинным названием города — на любой ширине, правый флоат НЕ помещался рядом
   и сваливался на вторую строку (замер: 1280 px, город «Ярославль» — ряд уезжал под адрес).
   Лечим flex-строкой: телефонная колонка отдаёт лишнее (33,33 % → не меньше своего содержимого),
   адрес при самой тесной раскладке обрезается многоточием, перенос невозможен в принципе.
   Вертикаль сохранена ровно как была: align-items:flex-start + собственные отрицательные поля
   .top-ctrl (−14 px) дают тот же top −2, что и на флоатах. Ниже 992 px верхней полосы нет вовсе. */
@media (min-width: 992px) {
	.top-block.top-block-v1 .wrapp_block > .row { display: flex; align-items: flex-start; flex-wrap: nowrap; }
	.top-block.top-block-v1 .wrapp_block > .row::before,
	.top-block.top-block-v1 .wrapp_block > .row::after { content: none; }
	.top-block.top-block-v1 .wrapp_block > .row > .top-block-item { float: none; }
	/* сжимается ПЕРВОЙ и до упора именно телефонная колонка (её 33,33 % — с большим запасом):
	   коэффициент сжатия у неё в миллион раз больше, чем у адреса, поэтому адрес теряет буквы
	   только когда телефонной колонке ужиматься уже некуда.
	   Ревью 06.09, замерено (harness/f2q-addr.js, субпиксельно, 4 ширины × 4 города):
	   • 278 px оказались МЕНЬШЕ содержимого телефонной колонки (её строка целиком — 289,8 px):
	     на 1200 px с «Петропавловск-Камчатский» колонка сжималась до 278 и «Заказать звонок»
	     переносился на вторую строку — высота 55,6 px вместо 37,6 (скрин out/F2Q-top-pk1200.png).
	     Вернули запас: 294 px — строка телефона больше не переносится ни на одной проверенной ширине.
	   • при ЛЮБОМ сжатии ряда адрес получал свою долю — 0,01–0,08 px, — и Chrome честно рисовал
	     многоточие («…, д. 3 к…») даже там, где телефонной колонке было куда ужиматься. Доля обратно
	     пропорциональна коэффициенту соседа, поэтому подняли коэффициент телефонной колонки с 1 000
	     до 1 000 000: доля адреса становится ~1e-5 px, то есть меньше 1/64 px (единица раскладки
	     Chrome) — нулевой. Уменьшать вместо этого коэффициент АДРЕСА нельзя: по правилам flexbox,
	     если сумма коэффициентов незамороженных элементов меньше единицы, распределяется только эта
	     доля свободного места — проверено, ряд начинал вылезать за контейнер на 49 px.
	     Крайний случай при 0 1 auto работает как задумано: когда телефонная колонка упирается в
	     min-width, адрес остаётся единственным сжимаемым и забирает весь остаток (многоточие). */
	.top-block.top-block-v1 .wrapp_block > .row > .top-block-item.col-md-4,
	.top-block.top-block-v1 .wrapp_block > .row > .top-block-item.col-md-2 { flex: 0 1000000 auto; min-width: 294px; }
	.top-block.top-block-v1 .wrapp_block > .row > .top-block-item.pull-left { flex: 0 1 auto; min-width: 0; }
	.top-block.top-block-v1 .wrapp_block > .row > .top-block-item.pull-left .address {
		display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.top-block.top-block-v1 .wrapp_block > .row > .top-ctrl { flex: 0 0 auto; margin-left: auto; }
}

/* ═══ п.13: город · Войти/имя · Заказы · Избранное · Корзина — одна линия, одна высота 45px, один цвет ═══
   Промежуток 13 px (было 20, потом 16): каждый отданный пиксель уходит адресу компании слева. Замер
   06.09 (harness/f2q-addr.js, 4 ширины × 4 города): на 1280 px — ширине окна владельца — адрес целиком
   при всех четырёх городах, включая «Петропавловск-Камчатский»; на самой узкой десктопной раскладке
   (1200) целиком при «Москва» и «Ярославль», у длинных названий хвост уходит в многоточие — это
   штатное поведение, ряд при этом остаётся в одну линию и без горизонтальной прокрутки. */
.top-block .g4top-flex { display: flex; align-items: center; gap: 13px; height: 45px; }
.top-block .g4top-flex > :not(script) { display: inline-flex; align-items: center; height: 45px; margin: 0; }
/* обёртки динамических зон композита (personal_wrap / basket_wrap) — тоже flex по центру,
   иначе внутри них снова начинается inline-block с baseline-выравниванием */
.top-block .g4top-flex .personal_wrap,
.top-block .g4top-flex .personal.top,
.top-block .g4top-flex .wrapp-cabinet-menu,
.top-block .g4top-flex .basket_wrap,
.top-block .g4top-flex .basket_wrap > div[id*="bx_incl"],
.top-block .g4top-flex .wrapp_top_icon,
.top-block .g4top-flex .js-basket-block { display: inline-flex; align-items: center; height: 45px; gap: 7px; }
.top-block .g4top-flex .basket_wrap,
.top-block .g4top-flex .basket_wrap > div[id*="bx_incl"] { gap: 13px; }
.top-block .top-block-item .personal.top { max-width: none; }

/* сами ссылки: у темы «Войти» = block с padding 14px (47px), сердце/корзина = inline-block 45px
   с baseline, «Заказы» и город = 18px; и три разных цвета (#222 / #333 / оранжевый цвет ссылок темы) */
.top-block .g4top-flex a,
.top-block .g4top-flex .personal-link.dark-color:not(.active),
.top-block .top-block-item .personal.top .wrapp-cabinet-menu > a,
.top-block .top-block-item .personal.top > a,
.top-block .top-block-item .basket-link,
.top-block .top-block-item .basket-link:not(.basket),
.top-block .g4top-flex .g4orders-top a,
.top-block .g4top-flex #g4city {
	display: inline-flex; align-items: center; gap: 7px; height: 45px; padding: 0; margin: 0;
	color: #222; font-size: 13px; line-height: 18px; text-decoration: none; white-space: nowrap;
	overflow: visible; opacity: 1; transition: color .12s;
}
/* ховер: селекторы обязаны быть НЕ СЛАБЕЕ «спокойных» выше — иначе, например,
   `.personal-link.dark-color:not(.active)` (5 классов) перебивал `.personal-link:hover` (4 класса)
   и «Войти» единственная из пяти не подсвечивалась (замер: color оставался rgb(34,34,34)) */
.top-block .g4top-flex a:hover,
.top-block .g4top-flex .personal-link:hover,
.top-block .g4top-flex .personal-link.dark-color:not(.active):hover,
.top-block .top-block-item .personal.top .wrapp-cabinet-menu > a:hover,
.top-block .top-block-item .personal.top > a:hover,
.top-block .top-block-item .basket-link:hover,
.top-block .top-block-item .basket-link:not(.basket):hover,
.top-block .g4top-flex .g4orders-top a:hover,
.top-block .g4top-flex #g4city:hover,
.top-block .g4top-flex #g4city.is-open { color: #FF6600; }
.top-block .g4top-flex a:hover .name,
.top-block .g4top-flex a:hover .title,
.top-block .g4top-flex a:hover .wrap { color: inherit; }
.top-block .g4top-flex .basket-link:hover .title,
.top-block .g4top-flex .basket-link .title.dark_link,
.top-block .top-block-item .basket-link .title,
.top-block .top-block-item .basket-link:not(.basket) .title,
.top-block .top-block-item .basket-link.delay .title { color: inherit; font-size: 13px; padding: 0; }
.top-block .top-block-item .personal-link .name { padding: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.top-block .top-block-item .personal-link .wrap { display: inline-flex; align-items: center; }
.top-block .g4top-flex .personal-link.with_dropdown { padding-right: 0 !important; }
.top-block .g4top-flex .personal-link.with_dropdown:after { display: none; }   /* каретка темы — у Озона её нет */
.top-block .g4top-flex .basket_hover_block { display: none; }

/* иконки: у темы залитые глифы разных размеров с жёстким fill:#222 внутри SVG; у нас — линейные 18px
   одной толщины, цветом текста (маска CSS: currentColor красится и в ховер). Пережить композит
   (зоны шапки перерисовываются через 1–3 с) может только CSS — поэтому не JS-подмена, а маска. */
.top-block .g4top-flex i.svg,
.top-block .personal-link .svg-inline-cabinet,
.top-block .js-basket-block .svg-inline-wish,
.top-block .js-basket-block .svg-inline-basket {
	display: inline-block; width: 18px; height: 18px; min-width: 18px; min-height: 18px;
	position: static; top: 0; left: 0; margin: 0; opacity: 1 !important; flex: 0 0 18px;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.top-block .g4top-flex i.svg > svg { display: none; }
	.top-block .g4top-flex i.svg {
		background: currentColor;
		-webkit-mask: var(--g4hi) center / 18px 18px no-repeat; mask: var(--g4hi) center / 18px 18px no-repeat;
	}
	.top-block .g4top-flex i.svg-inline-cabinet { --g4hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c0-3.9 3.6-6.5 8-6.5s8 2.6 8 6.5'/%3E%3C/svg%3E"); }
	.top-block .g4top-flex i.svg-inline-wish { --g4hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
	.top-block .g4top-flex i.svg-inline-basket { --g4hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.4l2.3 11.2h11.2l2-8H6.1'/%3E%3C/svg%3E"); }
}
.top-block .g4top-flex .g4orders-top svg,
.top-block .g4top-flex .g4city__pin svg { display: block; width: 18px; height: 18px; opacity: 1; stroke: currentColor; }
.top-block .g4top-flex .g4city__pin { display: inline-flex; }

/* кружок счётчика: 20px по центру строки; оранжевый при >0 (класс basket-count ставит тема/наш код), серый при 0.
   Селектор .basket-link.delay .count и классы basket-count/empted сохранены — их обновляют F3/F7. */
.top-block .g4top-flex .basket-link .count,
.top-block .top-block-item .basket-link .count {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0;
	border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 20px; color: #fff; background: #b9b9c0;
	position: static; top: 0; box-shadow: none; flex: 0 0 20px;
}
.top-block .g4top-flex .basket-link .count.empted { background: #b9b9c0; }
body .top-block .g4top-flex .basket-link.basket-count .count { background: #FF6600; }
body .basket_wrap .basket-link.basket .title .count { display: none; }   /* второй счётчик внутри подписи — тема его и так прячет, страхуем */

/* ═══ п.30: город ═══ */
.top-block .g4top-flex #g4city { cursor: pointer; user-select: none; gap: 6px; position: static; outline: none; }
.top-block .g4top-flex #g4city:focus-visible { color: #FF6600; }
#g4city .g4city__name:empty::before { content: 'Выбрать город'; }   /* до cookie/GeoIP — сразу понятная подпись, без прыжка */
/* в справочнике есть названия до 60 знаков; предел с многоточием держит ряд в рамках
   (полное имя — в title блока). Реальные города («Петропавловск-Камчатский» ≈ 160 px) влезают целиком */
#g4city .g4city__name { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ п.12/14: попапы шапки. Живут в body с position:fixed — не зависят от стековых контекстов
   .header_wrap(z4) / .top-block(z13) / строки поиска (z10045) и потому ВСЕГДА поверх строки поиска и
   контента. Ниже только окно входа (#g4idm, z11000). ═══ */
.g4hpop { display: none; position: fixed; z-index: 10070; box-sizing: border-box; background: #fff; border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 26, 52, .16); padding: 8px; min-width: 232px; font-size: 14px; color: #001a34;
	line-height: 1.35; text-align: left; }
.g4hpop.is-on { display: block; }
.g4hpop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* мостик под курсор между именем и меню */
.g4hpop__it { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
	color: #001a34 !important; text-decoration: none !important; line-height: 20px; cursor: pointer; white-space: nowrap;
	transition: background .1s; }
.g4hpop__it:hover, .g4hpop__it:focus-visible { background: #f5f5f8; outline: none; }
.g4hpop__it svg { width: 18px; height: 18px; flex: 0 0 18px; color: #6f6f78; stroke: currentColor; }
.g4hpop__it:hover svg { color: #FF6600; }
.g4hpop__sep { height: 1px; background: #ececf0; margin: 6px 4px; }
.g4hpop__it--out { color: #6f6f78 !important; }

/* попап «Ваш город»: поле поиска СВЕРХУ, под ним подсказки (по мере ввода) либо 12 популярных */
/* в g4site.css осталось правило волны 6 «#g4citypop {position:absolute; top:calc(100% + 8px); right:-10px; z:10060…}» —
   id-селектор сильнее нашего класса .g4hpop, поэтому закрепляем своё той же силой (F3 старое правило удалит) */
#g4citypop.g4hpop { position: fixed; top: auto; right: auto; left: auto; z-index: 10070; width: 320px; padding: 14px 10px 10px;
	border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 26, 52, .16); cursor: default; }
.g4citypop__t { font-weight: 700; font-size: 16px; margin: 0 6px 10px; color: #001a34; }
.g4citypop__f { position: relative; margin: 0 4px 8px; }
.g4citypop__s { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #8a8a90; stroke: currentColor; pointer-events: none; }
/* селекторы с id: правило темы «input[type=text], … input {серый фон, радиус 2px, padding 13px}» (0,1,1) сильнее
   одного класса — без id лупа ложилась поверх текста, а поле было серым */
#g4citypop .g4citypop__inp { display: block; width: 100%; height: 44px; box-sizing: border-box; margin: 0; border: 1px solid #d9dbe1; border-radius: 12px;
	padding: 0 38px 0 38px; font-size: 14px; line-height: 42px; font-family: inherit; color: #001a34; background: #fff; outline: none; box-shadow: none;
	transition: border-color .12s, box-shadow .12s; }
#g4citypop .g4citypop__inp:focus { border-color: #FF6600; box-shadow: 0 0 0 3px rgba(255, 102, 0, .12); background: #fff; }
#g4citypop .g4citypop__inp::placeholder { color: #8a8a90; opacity: 1; }
.g4citypop__x { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: #8a8a90; cursor: pointer; }
.g4citypop__x.is-on { display: inline-flex; align-items: center; justify-content: center; }
.g4citypop__x:hover { background: #f2f2f5; color: #001a34; }
.g4citypop__x svg { width: 16px; height: 16px; stroke: currentColor; }
.g4citypop__h { font-size: 12px; color: #8a8a90; margin: 4px 12px 4px; }
/* 444 px = заголовок «Популярные города» (24 px) + 12 городов (по 35 px) и 8 подсказок с областью (по 49 px) видны целиком,
   без «полугорода» под краем и без лишней прокрутки */
.g4citypop__l { max-height: 444px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.g4citypop__it { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: background .1s; }
.g4citypop__it b { font-weight: 600; font-size: 14px; color: #001a34; display: flex; align-items: center; gap: 8px; }
.g4citypop__it b .g4citypop__nm { display: inline; font-size: 14px; color: inherit; }   /* имя одним куском — иначе «Яросл» и «авль» разъезжаются как flex-элементы */
.g4citypop__it b em { font-style: normal; color: #FF6600; }   /* совпавшая часть */
.g4citypop__it .g4citypop__r { font-size: 12px; color: #8a8a90; }
.g4citypop__it:hover, .g4citypop__it.is-act { background: #f5f5f8; }
.g4citypop__it.is-cur b { color: #FF6600; }
.g4citypop__it.is-cur b svg { width: 16px; height: 16px; stroke: currentColor; margin-left: auto; }
.g4citypop__e { padding: 14px 12px 8px; color: #8a8a90; font-size: 14px; }
.g4citypop__e b { display: block; color: #001a34; font-weight: 600; margin-bottom: 2px; }

/* родная выпадашка кабинета темы: серая планка, задержка 0,3 с, свой z-index под строкой поиска —
   её заменяет наше меню (#g4cabpop), родную прячем */
.top-block .g4top-flex .cabinet-dropdown { display: none !important; }

/* ═══ п.14: окно входа должно появляться мгновенно ═══
   Замер 05.09 (harness/f2f-1.js, f2f-4.js, реальные клики мышью, кадр = 2×rAF):
   клик «Войти» → видимое окно 100–463 мс при норме ≤100.
   Виновата НЕ разметка окна (её вставка со стилем и раскладкой стоит 4 мс) и НЕ размытие фона
   (полноэкранный слой с backdrop-filter:blur(2px) — 8–14 мс), а правило g4id.css
   «body.g4idm-lock{overflow:hidden}»: снятие полосы прокрутки превращает body в скролл-контейнер
   и перекладывает всю страницу — 106 / 245 / 138 мс на главной / разделе / карточке; закрытие окна
   стоит столько же ещё раз. scrollbar-gutter:stable не помогает (замер: 111 / 256 / 121 мс).
   Поэтому раскладку не трогаем вовсе, а прокрутку страницы под окном гасим в g4header.js
   (wheel/touchmove/клавиши-прокрутки, пока в DOM есть #g4idm). Замер после: клик → окно 21–42 мс,
   закрытие 22–78 мс. Селектор «html body» сильнее правила в g4id.css, который грузится ПОЗЖЕ
   (footer.php — общий файл, его версию ?v мы бампать не вправе).
   Мобилку (≤767) не трогаем: там полосы прокрутки наложенные, ширина от overflow:hidden не меняется,
   и модалка входа принята владельцем как есть. */
@media (min-width: 768px) {
	html body.g4idm-lock { overflow: visible; }
}
#g4idm { overscroll-behavior: contain; }
#g4citypop, #g4cabpop { overscroll-behavior: contain; }   /* прокрутка попапа шапки не «пробивает» на страницу */   /* прокрутка длинной карточки не «пробивает» на страницу */

/* ═══ волна 8 (06.09.2026), п.39: выпадашки верхнего меню — сразу под своим пунктом, ПОВЕРХ строки поиска ═══
   Владелец: «Пункты выпадающего меню под „Доставка и оплата“ и т. д. появляются НИЖЕ строки поиска.
   Должны появляться сразу под надписью, ПОВЕРХ строки поиска».
   Замер до правки (harness/f2i-menu.js, 1440px, главная): у всех трёх выпадашек (Каталог, Доставка и
   оплата, О компании) computed margin-top = 66px, низ пункта меню 168px, верх выпадашки 234px — ровно
   высота строки поиска (#g4dsearch-wrap 168…234). Сдвиг задавали два правила волн 6–7:
   local/g4search.css:61 (файл F1) и local/g4site.css:590 (файл F3) — «margin-top: var(--g4dsh, 66px)».
   Чужие файлы не трогаем: перебиваем из своего, он подключается позже обоих (00-core → 10-search → 20-header).
   Стековка (замер там же): .wrapper1 > .header_wrap = position:relative z-index:4, #g4dsearch-wrap =
   position:relative z-index:2 — выпадашка (внутри шапки) и так рисуется ПОВЕРХ строки. Поднимаем шапку
   до 30, чтобы правка пережила возможную смену z-index строки в волне 8 (зона F1); при открытой
   выпадашке ПОИСКА (body.g4sg-open поднимает строку до 10045) шапка снова ниже — поиск главнее. */
body.g4ds-on .logo_and_menu-row .mega-menu td.menu-item .wrap > .dropdown-menu { margin-top: 0 !important; }
body.g4ds-on:not(.g4sg-open) .wrapper1 > .header_wrap { z-index: 30; }

/* ═══ волна 8, п.17 «Сравнение убери везде» ═══
   Из верхней полосы сравнение ушло вместе с CNext::ShowBasketWithCompareLink (header_1.php теперь
   печатает только «Избранное» и «Корзину»). В мобильном меню пункт «Сравнение товаров» скрыт чужим
   правилом local/g4site.css:563–565 (a[href*="compare"]{display:none}), но контейнер .menu.middle
   остаётся и рисует пустую полосу 1px между «Избранное» и телефоном (замер диагноста:
   menuMiddle[2].cs.h = 1, скрин F2-diag-mob-menu.png). Прячем контейнер, когда в нём не осталось
   ничего, кроме сравнения. Штатное решение (опция темы CATALOG_COMPARE = N) — вопрос координатору. */
#mobilemenu .menu.middle:has(> ul > li.counters > a.basket-link.compare:only-child) { display: none !important; }
#mobilemenu .menu.middle:has(> ul > li:only-child > a.basket-link.compare) { display: none !important; }

/* ═══ волна 8 (доводка, 06.09.2026), п.39: мегаменю «Каталог» обрезано снизу ═══
   Замер: в собранном css темы (/bitrix/cache/css/s1/aspro_next/template_e1121a28ba62…_v1.css)
   правило «.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu { … max-height: 485px;
   overflow: auto; … }» — отсюда ровно те 485 px, что были замерены у выпадашки (ddTop 168, ddBottom 653).
   Прокрутка формально есть (overflow:auto), но полоса в Chrome оверлейная и не видна: выглядит как обрез
   нижнего ряда разделов по тексту. У самой темы для длинных меню есть режим .long-menu-items
   (max-height:none; overflow:visible) — берём его логику, но высоту ограничиваем НИЗОМ ЭКРАНА,
   чтобы выпадашка никогда не уходила за край. Внутренний контейнер .customScrollbar тема режет тем же
   485 px — снимаем и его. */
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu {
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.menu-row .mega-menu table td.wide_menu .dropdown-menu:not(.long-menu-items) .customScrollbar {
	max-height: none;
}

/* ═══ волна 8, раунд 3 (находка 3 приёмки): у мегаменю должна быть ВИДИМАЯ полоса прокрутки ═══
   Замер приёмки, окно 1440×768: max-height 588, содержимому нужно 684 → обрез 97 px, при этом
   offsetWidth − clientWidth = 0 (в Chrome полоса оверлейная и не видна) — пользователь не понимает,
   что список можно мотать. Точную высоту («до низа экрана») ставит замером g4header.js megaFit();
   здесь — сама полоса: как только объявлен ::-webkit-scrollbar, Chrome рисует классическую полосу
   и резервирует под неё место. */
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu::-webkit-scrollbar { width: 10px; }
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu::-webkit-scrollbar-thumb {
	background: #d6d6d6;
	border: 3px solid #fff;
	border-radius: 8px;
}
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu::-webkit-scrollbar-thumb:hover { background: #b9b9b9; }

/* ═══ волна 9 (11.09.2026), п.39: у последнего ряда мегаменю «Каталог» нет отступа снизу при прокрутке ═══
   Владелец (скрин С1, 1920×1080, /catalog/new-year/): «Где отступ внизу? Почему нижний ряд каталога
   упирается в край меню?». Воспроизведено и замерено (harness/w9-f2-mega.js, настоящая мышь, 1366×768):
   выпадашка 588 px, содержимому нужно 684 → прокрутка; в конце прокрутки низ ряда «На новый год» = низ
   выпадашки, зазор 0,2 px. Причина (дерево DOM того же замера): разделы — флоаты внутри ul.menu-wrapper
   и div.customScrollbar ВЫСОТОЙ 0 (флоаты никем не «закрыты»); высоту самой выпадашки флоаты задают
   (overflow:auto = BFC, их margin-bottom 30 px и padding-bottom 10 px учтены → без прокрутки зазор 40),
   а в ОБЛАСТЬ ПРОКРУТКИ Chrome кладёт только border-box флоатов — ни их margin-bottom, ни padding-bottom
   контейнера после пустого ul туда не попадают. Лечение: «закрывающий» ::after у ul.menu-wrapper
   (clear:both) — его верх встаёт под margin-краем нижнего флоата, ul получает высоту, и область прокрутки
   доходит до края последнего ряда + его 30 px. Замер с этим правилом: 1366×768 в конце прокрутки — 30,2 px,
   1440×900 (без прокрутки) — 30. Верхний отступ уравнен с нижним: 30 px (было 25), нижний padding темы
   (10) снят, чтобы низ и без прокрутки был те же 30, а не 40. 30 = штатный шаг между рядами темы. */
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu { padding-top: 30px; padding-bottom: 0; }
.menu-row .mega-menu table td.wide_menu > .wrap > .dropdown-menu .menu-wrapper::after { content: ''; display: block; clear: both; height: 0; }

/* ═══ 18.09.2026 (тест волн 9–11, п.50): телефон — строка города под мобильной шапкой и попап города шторкой ═══ */
@media (max-width: 767px) {
	/* id-правило g4site.css «#g4city { display:inline-flex; position:relative; color:#333 }» сильнее класса — перебиваем той же силой */
	#g4city.g4mcity { display: flex; position: static; align-items: center; gap: 6px; width: auto; padding: 9px 16px; background: #fff; border-bottom: 1px solid #f0f0f3;
		font-size: 14px; line-height: 18px; color: #001a34; cursor: pointer; -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
	#g4city.g4mcity .g4city__name { max-width: 72vw; }
	.g4mcity .g4city__pin, .g4mcity .g4city__chev { display: inline-flex; flex: 0 0 auto; }
	.g4mcity .g4city__pin svg { width: 16px; height: 16px; color: #FF6600; stroke: currentColor; }
	.g4mcity .g4city__chev svg { width: 14px; height: 14px; color: #8a8a90; stroke: currentColor; }
	.g4mcity .g4city__name { font-weight: 600; max-width: 72vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* попап города — нижняя шторка на всю ширину; inline top/left от place() перебиваем */
	#g4citypop.g4hpop { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0; width: auto; max-height: 82vh;
		border-radius: 16px 16px 0 0; padding: 14px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(0, 26, 52, .18); }
	#g4citypop .g4citypop__inp { font-size: 16px; }   /* iOS не приближает страницу при фокусе */
	#g4citypop .g4citypop__l { max-height: 52vh; -webkit-overflow-scrolling: touch; }
	#g4citypop .g4citypop__it { padding: 11px 12px; }
	/* затемнение под шторкой: класс ставит g4header.js (popShow/popHide); тап по нему — «мимо попапа» → закрывает */
	body.g4mcity-on::after { content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 26, 52, .45); z-index: 10060; }
}

/* ═══ 25.09.2026 (тест Лизы 24.09, п.2): «при наведении на „Доставка и оплата“ и „О компании“ задваивается
   полоска» ═══ Замер (1536 px): у пункта шапки тема рисует подчёркивание .line (2px, по ширине надписи,
   y 165,6–167,6), а у выпадашки — свою планку над первым пунктом (…> .menu-wrapper > li:first-of-type::before,
   2px, во всю ширину выпадашки, top:-1px → y 166,6). С волны 8 (п.39) выпадашка стоит вплотную под пунктом
   (margin-top:0 выше), и две оранжевые полосы легли друг на друга со сдвигом. Оставляем одну — подчёркивание
   пункта (как у пунктов без выпадашки: «Акции», «Купить оптом»). */
body .menu-row .mega-menu table td .wrap > .dropdown-menu .menu-wrapper > li:first-of-type::before,
body .menu-row .mega-menu table td .wrap > .dropdown-menu > li:first-of-type::before { display: none; }

/* ═══ 17.10.2026 (ТЗ Т4, CLS телефона): строку города g4header.js (defer) вставляет под #mobileheader уже ПОСЛЕ первой
   отрисовки — всё ниже съезжало на 37 px (замер: 0,04–0,06 CLS на любой странице). Место держим заранее: класс g4mcb
   на <html> ставит local/g4w7/20-header.head.php только на телефоне (≤767 px — то же условие, что MOB в g4header.js);
   как только строка появилась, распорка пропадает в том же кадре. ═══ */
@media (max-width: 767px) {
	html.g4mcb #mobileheader { margin-bottom: 37px; }   /* у #mobileheader height:63px + overflow:hidden — место только отступом */
	html.g4mcb:has(#g4city.g4mcity) #mobileheader { margin-bottom: 0; }   /* строка есть (где бы ни стояла после смены ширины) */
}