/*
 * Общие элементы сайта в новом стиле: мобильное меню, узкая шапка, подвал.
 * Подключается в шапке на всех страницах.
 */

/* ─── Подборки в левой колонке (tpl/left.php, 15.09.2026) ─────────────────── */
.gsm-picks {
	margin: 12px 0; padding: 10px 8px; box-sizing: border-box; text-align: left;
	background: #fff; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(20, 28, 38, .08), 0 6px 16px rgba(20, 28, 38, .05);
	font-family: 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
}
.gsm-picks__t { padding: 2px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7480; }
.gsm-picks a.gsm-picks__a,
.gsm-picks a.gsm-picks__a:visited {
	display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
	color: #23282d; font-size: 13px; font-weight: 600; line-height: 1.25; text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.gsm-picks a.gsm-picks__a:hover,
.gsm-picks a.gsm-picks__a:focus-visible { background: #eaf4fb; color: #1f6f97; text-decoration: none; outline: none; }
.gsm-picks__i { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.gsm-picks__i svg { width: 17px; height: 17px; }
.gsm-picks a.gsm-picks__a:hover .gsm-picks__i { transform: scale(1.06); }
.gsm-picks__i--new { background: #e8f0fe; color: #2563eb; }
.gsm-picks__i--arrive { background: #e3f5f1; color: #0f8a74; }
.gsm-picks__i--soon { background: #f0ebfd; color: #7c3aed; }
.gsm-picks__i--down { background: #e5f5eb; color: #17a05f; }
.gsm-picks__i--sale { background: #fdeceb; color: #d93b30; }
@media (prefers-reduced-motion: reduce) { .gsm-picks a.gsm-picks__a, .gsm-picks__i { transition: none; } }
/* Отзывы о магазине на Яндекс.Маркете (tpl/left.php, 15.09.2026) */
.gsm-review,
.gsm-review:link,
.gsm-review:visited {
	display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px; box-sizing: border-box; text-align: left;
	border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(20, 28, 38, .08), 0 6px 16px rgba(20, 28, 38, .05);
	color: var(--gsm-ink, #23282d); text-decoration: none; font-family: var(--gsm-font, 'Open Sans', Tahoma, Verdana, Arial, sans-serif);
}
.gsm-review:hover { background: var(--gsm-blue-soft, #f0f8fc); color: var(--gsm-ink, #23282d); text-decoration: none; }
.gsm-review__ic { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gsm-amber-soft, #fff8e6); color: var(--gsm-amber, #e3a008); }
.gsm-review__ic svg { width: 17px; height: 17px; }
.gsm-review__text { display: flex; flex-direction: column; }
.gsm-review__text b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.gsm-review__text span { color: var(--gsm-ink-2, #6b7480); font-size: 12px; line-height: 1.3; }

/* ─── Мобильное меню: иконки Lucide ──────────────────────────────────────────
   Раньше иконки были картинками, и скрипт подменял их при нажатии. Теперь
   это линии одного набора, цвет задаётся классом активного пункта. */
/* Полоса была 50 px, и подпись (строка 19 px с 33-го пикселя) упиралась
   в нижний край — шапка выглядела сплющенной. Теперь 60 px, значок и подпись
   по центру пункта. Всё, что стоит под шапкой (отступ страницы, выпадающий
   каталог, счётчик корзины), сдвинуто на те же 10 px. Прилипание шапки при
   прокрутке прячет только строку с логотипом (-50px) — его это не касается. */
.mobile_v_menu { height: 60px; box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, .22); }
/* Прилипшая шапка: строка с логотипом уехала вверх (скрипт ставит top: -50px),
   и белая линия над меню оказывалась у самого края экрана. Убираем её. */
.mobile_header[style*="-50px"] .mobile_v_menu { border-top-color: transparent; }
.mobile_v_menu > div > * { vertical-align: top; }
.mobile_v_menu > div > .mobile_v_menu_item,
.mobile_v_menu > div > a > .mobile_v_menu_item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 2px;
	box-sizing: border-box;
}
.mobile_v_menu > div > a > .mobile_v_menu_item { display: flex; width: 100%; height: 100%; }
.mobile_v_menu > div .mobile_v_menu_item > div {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
}
.mobile_v_menu > div .mobile_v_menu_item p {
	margin: 0;
	font-size: 11px;
	line-height: 14px;
	white-space: nowrap;
}
.padding { height: 110px; }
.pop_up_menu_cat_mob { padding-top: 109px; }
.pop_up_menu_cat_mob_pad { height: 109px; }
.mobile_basket_count { top: 62px; }
.mobile_v_menu .mvi-icon { display: inline-flex; color: #fff; }
.mobile_v_menu .mvi-icon svg { width: 22px; height: 22px; }
.mobile_v_menu_item_a .mvi-icon,
.mobile_v_menu_item_bask .mvi-icon { color: var(--gsm-link, #2876a5); }
.mobile_v_menu_item_bask_now .mvi-icon { color: #fff; }

/* ─── Узкая шапка полной версии (окно уже 760 px) ────────────────────────────
   На телефонах сайт отдаёт отдельную мобильную шапку; эта — для узкого окна
   браузера на компьютере. Логотип, поиск на всю ширину и значки в одну строку. */
@media (max-width: 760px) {
	.main_head { height: auto; min-height: 0; padding: 8px 10px; }
	.main_head .main_head_tab { align-items: center; gap: 8px; width: 100%; height: auto; }
	.main_head .logo_block,
	.main_head .logo_m_div { flex: none; width: 40px; height: auto; }
	.main_head .logo_m_div a { display: block; height: auto; }
	.main_head .logo_m_img { position: static; width: 40px; height: auto; }
	.main_head .flex-header-content { align-items: center; gap: 8px; height: auto; }
	.main_head .back_call_td { flex: 1 1 auto; min-width: 0; width: auto; height: auto; }
	.main_head .pod_header_tab,
	.main_head #search_form { width: 100%; margin: 0; padding: 0; }
	.main_head .user_td,
	.main_head .user.new_user { flex: none; flex-direction: row; align-items: center; gap: 6px; width: auto; height: auto; }
	.main_head .new_user_pad_div.login_mobile { width: 40px; height: 40px; margin: 0; padding: 0; overflow: hidden; border-radius: var(--gsm-r-sm, 8px); }
	/* Внутри кнопки — таблица с пустыми ячейками и картинкой 35 px: иконка
	   съезжала и обрезалась. Растягиваем первую ячейку на всю кнопку,
	   остальные прячем, иконку ставим по центру. */
	.main_head .login_mobile .user_mobile_tab,
	.main_head .login_mobile .user_mobile_tab tbody,
	.main_head .login_mobile .user_mobile_tab tr { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
	.main_head .login_mobile .user_mobile_tab td { display: none; }
	.main_head .login_mobile .user_mobile_tab td:first-child {
		display: flex; align-items: center; justify-content: center;
		width: 100%; height: 40px; padding: 0;
	}
	.main_head .login_mobile .to_vhod { width: 24px; height: 24px; margin: 0; }
}

/* ─── Подвал (переделан 14.09.2026) ────────────────────────────────────────
   Глубокий синий фон с мягким переходом, шрифт сайта (--gsm-font), чёткая
   иерархия: название магазина → «Связаться с нами» → телефон крупно → строки со
   значками в полупрозрачных кружках → белая кнопка «Обратный звонок». Разделы и
   бренды — колонками; внизу — копирайт, рейтинг и переключатель версии пилюлей.
   На телефоне — одна колонка, строки контактов на всю ширину (удобно нажимать),
   без «Покупателям» и значков мессенджеров. */
.footer_table_wrap.sf {
	padding: 40px 20px 24px;
	background: linear-gradient(180deg, var(--gsm-blue, #3399cc) 0%, var(--gsm-blue-dark, #2b83b0) 100%);
	color: #fff;
	font-family: var(--gsm-font, 'Open Sans', Tahoma, Verdana, Arial, Helvetica, sans-serif);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
.sf__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1.2fr) 1fr 1.8fr;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}
.sf .sf__brand { display: flex; flex-direction: column; gap: 4px; margin: 0 0 24px; }
.sf .sf__brand-name { font-size: 22px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.sf .sf__brand-tag { max-width: 300px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.sf .sf__title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.sf a,
.sf a:link,
.sf a:visited { color: #fff; text-decoration: none; }
.sf a:hover { text-decoration: none; }
/* Значок в полупрозрачном кружке — у телефона, почты, Telegram и кнопки. */
.sf .sf__ic {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255, 255, 255, .14); color: #fff;
	transition: background-color .2s ease;
}
.sf .sf__ic svg { width: 18px; height: 18px; }
.sf .sf__phone { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.sf .sf__phone .sf__ic { width: 44px; height: 44px; background: #fff; color: var(--gsm-blue-dark, #2b83b0); }
.sf .sf__phone .sf__ic svg { width: 20px; height: 20px; }
.sf .sf__phone-text { display: flex; flex-direction: column; }
.sf .sf__phone-text b { font-size: 22px; font-weight: 800; letter-spacing: .01em; line-height: 1.15; white-space: nowrap; }
.sf .sf__phone-text small { font-size: 12px; color: rgba(255, 255, 255, .78); }
.sf .sf__row { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 15px; }
.sf .sf__row small { margin-left: 4px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.sf .sf__row:hover .sf__ic,
.sf .sf__phone:hover .sf__ic { background: rgba(255, 255, 255, .26); }
.sf .sf__phone:hover .sf__ic { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.sf .sf__social { display: flex; gap: 8px; margin-top: 16px; }
.sf .sf__social a {
	display: block; width: 36px; height: 36px; border-radius: 50%;
	background-color: rgba(255, 255, 255, .14); background-size: 20px; background-position: center; background-repeat: no-repeat;
	transition: background-color .2s ease;
}
.sf .sf__social a:hover { background-color: rgba(255, 255, 255, .26); }
.sf .to_back_call {
	display: inline-flex; align-items: center; gap: 10px;
	width: auto; margin: 20px 0 0; padding: 6px 20px 6px 6px;
	border: 0; border-radius: 999px;
	background: #fff; color: var(--gsm-blue-dark, #2b83b0);
	font-size: 15px; font-weight: 700; line-height: 1;
	box-shadow: 0 4px 14px rgba(8, 40, 70, .18);
	cursor: pointer; transition: transform .15s ease, box-shadow .2s ease;
}
/* Старые стили задают кнопке ширину — текст переносился на две строки. */
.footer_table_wrap.sf .to_back_call { width: auto !important; max-width: none; height: auto; white-space: nowrap; }
.sf .to_back_call .sf__ic { width: 34px; height: 34px; background: var(--gsm-blue-soft, #f0f8fc); color: var(--gsm-blue-dark, #2b83b0); }
.sf .to_back_call:hover { box-shadow: 0 6px 18px rgba(8, 40, 70, .26); transform: translateY(-1px); background: #fff; }
.sf .to_back_call:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sf .sf__list { margin: 0; padding: 0; list-style: none; }
.sf .sf__list li { margin: 0 0 10px; }
.sf .sf__list a { font-size: 15px; color: rgba(255, 255, 255, .92); border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.sf .sf__list a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.sf .sf__brands { columns: 3; column-gap: 24px; }
.sf__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: 1200px;
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: 13px;
}
.sf__bottom .footer-copyright { position: static; margin: 0; padding: 0; color: rgba(255, 255, 255, .85); font-size: 13px; }
.sf__bottom .sf__rating { display: block; border: 0; border-radius: 8px; }
.sf__bottom .footer_device_changer_div { width: auto; max-width: none; margin: 0; text-align: right; color: #fff; }
.sf__bottom .footer_device_changer_div > a.footer_device_changer,
.sf__bottom .footer_device_changer_div > a.footer_device_changer:hover {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 14px 4px 4px; border-radius: 999px;
	background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 600;
	cursor: pointer; transition: background-color .2s ease;
}
.sf__bottom .footer_device_changer_div > a.footer_device_changer:hover { background: rgba(255, 255, 255, .22); }
.sf__bottom .footer_device_changer .sf__ic { width: 28px; height: 28px; }
.sf__bottom .footer_device_changer .sf__ic svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
	.sf .sf__ic, .sf .to_back_call, .sf .sf__social a, .sf .sf__list a { transition: none; }
}

/* Строка значков — только на телефоне. */
.sf .sf__quick,
.sf .sf__qpanel { display: none; }

@media (max-width: 760px) {
	/* Компактный подвал на телефоне (14.09.2026): строка из четырёх одинаковых
	   значков 44 px (телефон, почта, Telegram, обратный звонок), под ними —
	   панель с номером или адресом по нажатию. Внизу одна строка мелким шрифтом:
	   копирайт и «Полная версия сайта». Без названия, рейтинга, «Покупателям»,
	   брендов и значков соцсетей. Один размер текста — 13/14 px. */
	.footer_table_wrap.sf { padding: 16px 16px 14px; font-size: 13px; }
	.sf__inner { display: block; }
	.sf__brands-col,
	.sf .sf__col[aria-label="Покупателям"],
	.sf .sf__brand, .sf .sf__title, .sf .sf__phone, .sf .sf__row, .sf .sf__social,
	.footer_table_wrap.sf .to_back_call:not(.sf__qbtn) { display: none !important; }
	.sf .sf__quick { display: flex; justify-content: center; gap: 16px; }
	.sf .sf__qbtn {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; margin: 0; padding: 0;
		border: 0; border-radius: 50%;
		background: rgba(255, 255, 255, .16); color: #fff;
		cursor: pointer; transition: background-color .2s ease;
	}
	/* Цвет значка — от кнопки: у открытой кнопка белая, значок синий. */
	.sf .sf__qbtn .sf__ic { width: auto; height: auto; background: none; color: inherit; }
	.sf .sf__qbtn .sf__ic svg { width: 20px; height: 20px; }
	.sf .sf__qbtn[aria-expanded="true"] { background: #fff; color: var(--gsm-blue-dark, #2b83b0); }
	.sf .sf__qbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
	.sf .sf__qpanel:not([hidden]) {
		display: flex; flex-direction: column; align-items: center; gap: 2px;
		margin: 12px 0 0; padding: 10px 12px;
		border-radius: 10px; background: rgba(255, 255, 255, .12);
		font-size: 14px; text-align: center;
	}
	.sf .sf__qpanel b { font-weight: 700; }
	.sf .sf__qpanel small { font-size: 12px; color: rgba(255, 255, 255, .75); }
	.sf__bottom {
		flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 8px;
		margin-top: 14px; padding-top: 12px; font-size: 12px;
	}
	.sf__bottom .sf__rating { display: none !important; }
	.sf__bottom .footer-copyright { font-size: 12px; }
	.sf__bottom .footer_device_changer_div { text-align: right; }
	.sf__bottom .footer_device_changer_div > a.footer_device_changer,
	.sf__bottom .footer_device_changer_div > a.footer_device_changer:hover {
		padding: 0; background: none; font-size: 12px; font-weight: 400; text-decoration: underline;
	}
	.sf__bottom .footer_device_changer .sf__ic { display: none; }
}

/* ─── Уведомление (customAlert / customQuestion) в новом стиле ───────────────
   Разметку создаёт js/scripts_n.js, её не трогаем: .custom_alert_wrap,
   .alert_body, .alert_title, .alert_text, .alert_button. Щелчок по фону
   закрывает окно, как и раньше. */
.custom_alert_wrap {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	/* Старое правило в styles.css задаёт ширину и отступы обёртки: вместе
	   с нашим padding она становилась шире экрана, и на телефоне окно
	   уезжало за правый край. Размер задают только края, с учётом отступов. */
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	transform: none;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 32, .55);
	animation: ua-fade .18s ease-out;
}
.custom_alert_wrap .alert_body {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	min-width: 0;
	left: auto; top: auto; right: auto; bottom: auto;
	transform: none;
	flex: 0 1 auto;
	margin: 0;
	padding: 24px 24px 20px;
	border: 0;
	border-radius: var(--gsm-r-lg, 16px);
	background: #fff;
	box-shadow: 0 18px 48px rgba(15, 23, 32, .28);
	color: var(--gsm-ink, #23282d);
	text-align: left;
	animation: ua-in .22s ease-out;
}
/* Значок: круг с восклицательным знаком (Lucide circle-alert). */
.custom_alert_wrap .alert_body::before {
	content: '';
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 0 14px;
	border-radius: var(--gsm-r-md, 12px);
	background-color: var(--gsm-red-soft, #fdf2f2);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMjQwIDEyMCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMCAyMGg0MGwxNCAxNGg0NmwxMC0xMGg0MCIvPjxwYXRoIGQ9Ik0wIDY0aDI2bDE4LTE4aDM2Ii8+PHBhdGggZD0iTTExMCAxMjBWOTZsMTYtMTZoNTJsMTIgMTJoNTAiLz48cGF0aCBkPSJNMTYwIDB2MThsLTEwIDEwdjI0bDE0IDE0aDM2bDE0LTE0aDI2Ii8+PHBhdGggZD0iTTYwIDEyMHYtMjBsLTEyLTEySDAiLz48cGF0aCBkPSJNMjAwIDM0aDQwIi8+PC9nPjxnIGZpbGw9IiNmZmYiPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjI0IiByPSIzIi8+PGNpcmNsZSBjeD0iODAiIGN5PSI0NiIgcj0iMyIvPjxjaXJjbGUgY3g9IjE3OCIgY3k9IjgwIiByPSIzIi8+PGNpcmNsZSBjeD0iMjI2IiBjeT0iNTIiIHI9IjMiLz48Y2lyY2xlIGN4PSI0OCIgY3k9Ijg4IiByPSIzIi8+PGNpcmNsZSBjeD0iMjQwIiBjeT0iOTIiIHI9IjMiLz48Y2lyY2xlIGN4PSIwIiBjeT0iOTIiIHI9IjMiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIzNCIgcj0iMi41Ii8+PC9nPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
.custom_alert_wrap .alert_title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--gsm-ink, #23282d);
}
.custom_alert_wrap .alert_text {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #3a4148;
}
.custom_alert_wrap .alert_button_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
}
.custom_alert_wrap .alert_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--gsm-r-btn, 10px);
	background: var(--gsm-btn, #1f6f97);
	color: var(--gsm-btn-text, #fff);
	font-size: var(--gsm-fs-btn, 15px);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.custom_alert_wrap .alert_button:hover { background: var(--gsm-btn-hover, #185c7d); }
.custom_alert_wrap .alert_button + .alert_button { background: #fff; color: var(--gsm-ink, #23282d); box-shadow: inset 0 0 0 1px var(--gsm-line-strong, #ccd3da); }
.custom_alert_wrap .alert_button + .alert_button:hover { color: var(--gsm-blue, #3399cc); box-shadow: inset 0 0 0 1px var(--gsm-blue, #3399cc); }
@keyframes ua-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ua-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.custom_alert_wrap,
	.custom_alert_wrap .alert_body { animation: none; }
}
@media (max-width: 480px) {
	.custom_alert_wrap .alert_button { flex: 1 1 auto; }
}

/* ─── Страница товара: вес посылки под способами доставки ────────────────── */
.city-delivery-wrap .delivery-weight {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--gsm-ink-2, #6b7480);
}
.city-delivery-wrap .delivery-weight b { font-weight: 600; color: var(--gsm-ink, #23282d); }

/* ── Шапка сайта в едином оформлении (14.09.2026) ──────────────────────────
   Одна строка поиска (название, модель или код товара), кнопка «Найти» внутри
   поля, телефон, вход, избранное / корзина / бонусы плашками. Только компьютер:
   на телефоне своя шапка (.mobile_header). Закреплённая при прокрутке шапка
   (.small_head из styles.css) — компактнее. */
/* Выбор города в шапке v2 (21.09.2026) — вместо города в старой чёрной полосе */
.gsm-hcity { display: none; }
@media (min-width: 761px) {
	/* город и значок телефона — в одну строку: столбиком они выталкивали телефон ниже остальных значков */
	.main_head .all_r_delivery .bigger_p { flex-direction: row; align-items: center; gap: 2px; }
	.gsm-hcity { display: inline-flex; align-items: center; margin-right: 6px; }
	.gsm-hcity .my_region_block { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }
	.gsm-hcity .my_region_city, .gsm-hcity .my_region_city_choose { border-bottom: 1px dotted rgba(255, 255, 255, .6); }
	.gsm-hcity .my_region_block:hover .my_region_city, .gsm-hcity .my_region_block:hover .my_region_city_choose { border-bottom-color: #fff; }
	.gsm-hcity svg { opacity: .85; }
}

/* 21.09.2026 (51.7): старая чёрная полоса над шапкой (.top_menu) удалена из tpl/header.php вместе со стилями. */

@media (min-width: 761px) {
	.main_head { padding: 12px 16px; background: var(--gsm-blue, #3399cc); box-shadow: 0 1px 0 rgba(20, 28, 38, .08); }
	.main_head > .main_head_tab { max-width: 1280px; margin: 0 auto; align-items: center; gap: 28px; min-height: 64px; }
	.main_head .logo_block { flex: 0 0 190px; width: 190px; justify-content: center; }
	.main_head .logo_block .logo_img { width: 190px; height: auto; }
	.main_head .logo_div span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .02em; color: rgba(255, 255, 255, .85); }
	.main_head .flex-header-content { align-items: center; gap: 24px; }
	.main_head .back_call_td { flex: 1 1 auto; min-width: 0; justify-content: center; }
	.main_head .pod_header_tab { padding: 0; }
	.main_head .poisk_block { top: 0; }

	/* Строка поиска */
	.main_head .pod_header_tab input.main_search {
		height: 46px; min-height: 46px; max-height: 46px; box-sizing: border-box;
		padding: 0 120px 0 46px; border: 0; border-radius: 12px;
		font-size: 15px; color: var(--gsm-ink, #23282d);
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23949ba5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center / 18px 18px;
		box-shadow: 0 2px 8px rgba(10, 40, 70, .16);
		transition: box-shadow .15s;
	}
	.main_head .pod_header_tab input.main_search::placeholder { color: var(--gsm-ink-3, #949ba5); }
	.main_head .pod_header_tab input.main_search:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 2px 8px rgba(10, 40, 70, .16); }
	.main_head .poisk_block_text_wrap { top: 0; left: 40px; width: calc(100% - 160px); height: 46px; }
	.main_head .poisk_block_text { line-height: 46px; font-size: 15px; }
	.main_head .pod_header_tab .go_new_poisk {
		top: 5px; right: 5px; height: 36px; min-height: 36px; max-height: 36px;
		padding: 0 20px; line-height: 36px; border-radius: var(--gsm-r-btn, 10px);
		background: var(--gsm-btn, #1f6f97); font-size: var(--gsm-fs-btn-sm, 14px); font-weight: 600;
		transition: background .15s;
	}
	.main_head .pod_header_tab .go_new_poisk:hover { background: var(--gsm-btn-hover, #185c7d); }
	.main_head .poisk_block_pop { margin-top: 6px; border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 28, 38, .18); }
	.main_head #search-to-top { height: auto; margin-top: 6px; }
	.main_head .search_catalog label { font-size: 13px; }

	/* Телефон */
	.main_head .all_r_delivery { justify-content: center; }
	.main_head .bigger_p { margin: 0; }
	.main_head .big-number .big-number-href { font-size: 20px !important; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
	.main_head .big-number .font-small { font-size: 11px; opacity: .85; }

	/* Вход, избранное, корзина, бонусы */
	.main_head .user_td { justify-content: center; }
	.main_head #login_block { align-items: center; margin-bottom: 8px; }
	.main_head #login_href a { font-size: 15px; font-weight: 600; }
	.main_head .new_izb_block { height: 36px; }
	.main_head .izb_top { width: auto; height: 36px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
	.main_head .izb_top:hover, .main_head .new_basket_block:hover { background: rgba(255, 255, 255, .22); }
	.main_head .new_basket_block {
		display: flex; align-items: center; float: none;
		height: 36px; margin: 0 0 0 8px; padding: 0 10px 0 6px;
		border-radius: 10px; background: rgba(255, 255, 255, .14);
	}
	.main_head .bonus_info {
		display: flex; align-items: center; height: 36px; margin: 0 0 0 8px; padding: 0 10px;
		border-radius: 10px; background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 600;
	}
	.main_head .num_izb, .main_head .basket-count { background: rgba(0, 0, 0, .28); }

	/* Компактная шапка при прокрутке */
	.main_head.small_head { padding-top: 6px; padding-bottom: 6px; }
	.main_head.small_head > .main_head_tab { min-height: 48px; }
	.main_head.small_head .pod_header_tab input.main_search { height: 40px; min-height: 40px; max-height: 40px; }
	.main_head.small_head .poisk_block_text_wrap { height: 40px; }
	.main_head.small_head .poisk_block_text { line-height: 40px; }
	.main_head.small_head .pod_header_tab .go_new_poisk { top: 4px; height: 32px; min-height: 32px; max-height: 32px; line-height: 32px; }
}

.main_head .logo_div span,
.main_head .logo_div a > br { display: none; }
@media (min-width: 761px) {
	.main_head .pod_header_tab .go_new_poisk { background: var(--gsm-btn, #1f6f97); }
	.main_head .pod_header_tab .go_new_poisk:hover { background: var(--gsm-btn-hover, #185c7d); }
	.main_head .izb_top,
	.main_head .new_basket_block,
	.main_head .bonus_info { background: rgba(0, 0, 0, .16); }
	.main_head .izb_top:hover,
	.main_head .new_basket_block:hover { background: rgba(0, 0, 0, .24); }
	.main_head .new_basket_block .basket_sum_content:empty { display: none; }
	/* 15.09.2026: с кнопкой «Каталог» шапке стало тесно — плашки справа сжимались,
	   сумма корзины переносилась («1 / 650,00 ₽»), счётчик наезжал. Сжимается только поиск. */
	.main_head .all_r_delivery,
	.main_head .user_td { flex: none; }
	.main_head .new-basket-info { align-items: center; min-height: 24px; white-space: nowrap; }
	.main_head .basket_sum_content { white-space: nowrap; line-height: 1; }
	.main_head .basket_sum_content .rur { margin-top: 0; }
	.main_head .big-number .big-number-href { font-size: 18px !important; }
	.main_head .big-number .font-small { font-size: 12px; opacity: 1; }
	.main_head .poisk_block_pop:has(.sgg-item) { width: calc(100% + 140px); max-width: 720px; max-height: 520px; padding: 6px 0 0; }
}
/* Телефон: поле поиска удобное для пальца, 16 px — iOS не увеличивает страницу */
@media (max-width: 760px) {
	.mobile_poisk .main_search { height: 44px; min-height: 44px; font-size: 16px; border-radius: 12px; padding-left: 12px; box-sizing: border-box; }
	.mobile_poisk .poisk_block_pop:has(.sgg-item) { left: 0; right: 0; width: auto; max-width: none; max-height: 70vh; border-radius: 12px; }
}

/* Подсказки поиска */
.poisk_block_pop .sgg-item,
.poisk_block_pop .sgg-all { margin: 0; padding: 0; border: 0; }
.poisk_block_pop .sgg-item > a {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
	padding: 8px 14px; white-space: normal; text-decoration: none !important;
	color: var(--gsm-ink, #23282d) !important;
}
.poisk_block_pop .sgg-item.act_poisk_block_pop > a,
.poisk_block_pop .sgg-item > a:hover { background: var(--gsm-blue-soft, #f0f8fc); }
.poisk_block_pop .sgg-item--code > a { background: #f7fbfe; }
.poisk_block_pop .sgg-img { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid var(--gsm-line, #e4e8ec); box-sizing: border-box; }
.poisk_block_pop .sgg-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.poisk_block_pop .sgg-body { display: flex; flex-direction: column; min-width: 0; }
.poisk_block_pop .sgg-name {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 14px; line-height: 1.3; font-weight: 400 !important; color: var(--gsm-ink, #23282d) !important;
}
.poisk_block_pop .sgg-meta { margin-top: 2px; font-size: 12px; font-weight: 400 !important; color: var(--gsm-ink-3, #949ba5) !important; }
.poisk_block_pop .sgg-in { color: var(--gsm-green, #17a05f) !important; font-weight: 600 !important; }
.poisk_block_pop .sgg-order { color: var(--gsm-amber-ink, #8a5a00) !important; }
.poisk_block_pop .sgg-out { color: var(--gsm-ink-3, #949ba5) !important; }
.poisk_block_pop .sgg-price { font-size: 15px; font-weight: 700 !important; white-space: nowrap; color: var(--gsm-ink, #23282d) !important; font-variant-numeric: tabular-nums; }
.poisk_block_pop .sgg-code-badge {
	display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 6px;
	background: var(--gsm-blue, #3399cc); color: #fff !important;
	font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px;
}
.poisk_block_pop .sgg-all > a {
	display: block; padding: 10px 14px; border-top: 1px solid var(--gsm-line, #e4e8ec);
	font-size: 13px; font-weight: 600; text-decoration: none !important; color: var(--gsm-link, #2876a5) !important;
}
.poisk_block_pop .sgg-all.act_poisk_block_pop > a,
.poisk_block_pop .sgg-all > a:hover { background: var(--gsm-blue-soft, #f0f8fc); }

/* Телефон: поле поиска 44 px / 16 px. Старое правило styles.css жёстко задаёт 30 px —
   перебиваем более сильным селектором. Серая подстановка поверх поля выровнена под 30 px
   и дублирует выпадающие подсказки — на телефоне скрыта. */
@media (max-width: 760px) {
	body .mobile_poisk .m_poisk_body input[type="text"].main_search {
		height: 44px; min-height: 44px; max-height: 44px;
		padding: 0 42px 0 12px; font-size: 16px; line-height: normal; color: var(--gsm-ink, #23282d);
		border-radius: 12px; border: 1.5px solid var(--gsm-blue, #3399cc);
	}
	body .mobile_poisk .m_poisk_body .poisk_block_text_wrap { display: none; }
	.mobile_poisk .m_poisk_body .sbmt_b { top: 50%; transform: translateY(-50%); right: 8px; }
}

/* Подвал на телефоне: блок «Покупателям» (Контакты, Доставка, Новинки…) не показываем.
   Скрываем по классу — правило с aria-label="Покупателям" на телефоне не срабатывало (14.09.2026). */
@media (max-width: 760px) {
	.footer_table_wrap .sf__buyers-col { display: none !important; }
}

/* 16.09.2026: плашки избранного и корзины в шапке просторнее, числа по центру кружков */
@media (min-width: 761px) {
	.main_head .izb_top { height: 40px; padding: 0 12px; }
	.main_head .new_izb_block { height: 40px; }
	.main_head .new_basket_block { height: 40px; padding: 0 14px 0 10px; }
	.main_head .num_izb, .main_head .basket-count { min-width: 26px; height: 26px; line-height: 26px; padding: 0 7px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
	.main_head .basket_sum_content { padding-left: 8px; line-height: 1; }
}


/* ── Шапка v2 (16.09.2026) ─────────────────────────────────────────────────
   Главное в шапке — поиск: он забирает всё свободное место. Остальное —
   одинаковые плашки 44 px по центру: телефон и вход иконками (номер открывается
   по нажатию, «Войти / Регистрация» — при наведении), избранное, корзина.
   Кнопка «Каталог» прячется, когда слева есть колонка каталога.
   Фон — глубокий градиент фирменного синего с мягким бликом вместо узора. */
@media (min-width: 761px) {
	.main_head {
		position: relative; isolation: isolate; z-index: 100; /* выпадашки телефона и входа поверх баннера и контента */
		background:
			radial-gradient(900px 240px at 12% -60%, rgba(255, 255, 255, .22), transparent 70%),
			radial-gradient(700px 260px at 92% 160%, rgba(4, 40, 78, .45), transparent 70%),
			linear-gradient(100deg, #0d7fbb 0%, #1089c6 45%, #0b6fa6 100%);
	}
	/* Идея 27: едва заметная сетка из точек, как на миллиметровке, тает к середине */
	.main_head::before {
		content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
		background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.3px);
		background-size: 14px 14px; background-position: 7px 7px; opacity: .35;
		-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 28%, transparent 42%, transparent 58%, rgba(0,0,0,.35) 72%, #000 100%);
		mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 28%, transparent 42%, transparent 58%, rgba(0,0,0,.35) 72%, #000 100%);
	}
	.main_head::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1; pointer-events: none;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45) 30%, rgba(255, 255, 255, .45) 70%, transparent);
	}
	.main_head > .main_head_tab, .main_head .flex-header-content { align-items: center; }
	.main_head .logo_block, .main_head .back_call_td, .main_head .all_r_delivery { justify-content: center; }
	/* поле поиска по центру: под ним пустые служебные блоки */
	.main_head .pod_header_tab form > div { display: flex; flex-direction: column; justify-content: center; }
	.main_head .pod_header_tab .search_butt, .main_head .poisk_block > br { display: none; }
	.main_head #search-to-top { height: 0; margin: 0; padding: 0; }
	/* Поиск в фокусе: без контура и подсветки */
	.main_head .pod_header_tab input.main_search:focus {
		outline: 0;
		box-shadow: none;
	}
	.gsm-phone-btn, .gsm-login-pop { display: none; }
}

@media (min-width: 761px) { /* 27.10.2026: было 1100px — на 761–1099 значки шапки разъезжались */
	.main_head { --hh: 44px; }
	/* каталог слева уже есть — кнопка не нужна */
	body:has(td.left_gl_cell) .main_head .gsm-cat-wrap { display: none; }
	.main_head .gsm-cat-btn { height: var(--hh); }

	/* Поиск — всё свободное место */
	.main_head .flex-header-content { gap: 10px; }
	.main_head .back_call_td { flex: 1 1 0 !important; min-width: 0; margin: 0 6px 0 0 !important; padding: 0 !important; }
	.main_head .pod_header_tab, .main_head .pod_header_tab form, .main_head .pod_header_tab form > div, .main_head .poisk_block { flex: none; width: 100% !important; max-width: none !important; }
	.main_head .pod_header_tab input.main_search { width: 100% !important; max-width: none !important; box-sizing: border-box; height: var(--hh); min-height: var(--hh); max-height: var(--hh); }
	.main_head .poisk_block_text_wrap { height: var(--hh); }
	.main_head .poisk_block_text { line-height: var(--hh); }
	.main_head .pod_header_tab .go_new_poisk { top: 4px; height: 36px; min-height: 36px; max-height: 36px; line-height: 36px; }

	/* Общая плашка-кнопка шапки */
	.main_head .gsm-hbtn, .main_head #login_block, .main_head .izb_top, .main_head .new_basket_block {
		display: flex; align-items: center; justify-content: center; box-sizing: border-box;
		height: var(--hh); min-width: var(--hh); margin: 0; border: 0; border-radius: 12px;
		background: rgba(4, 40, 78, .22); color: #fff; cursor: pointer; transition: background .15s;
	}
	.main_head .gsm-hbtn:hover, .main_head #login_block:hover, .main_head .izb_top:hover, .main_head .new_basket_block:hover,
	.main_head .all_r_delivery.is-open .gsm-hbtn { background: rgba(4, 40, 78, .34); }

	/* Телефон: иконка, номер — во всплывающей карточке */
	.main_head .all_r_delivery { margin: 0 !important; position: relative; }
	.main_head .all_r_delivery .bigger_p { padding: 0; }
	.main_head .gsm-phone-btn { display: flex; padding: 0; }
	.main_head .all_r_delivery .big-number {
		display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px;
		padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(4, 40, 78, .25); text-align: left;
	}
	.main_head .all_r_delivery.is-open .big-number, .main_head .all_r_delivery .bigger_p.is-open .big-number { display: block; }
	.main_head .all_r_delivery .big-number .big-number-href { color: var(--gsm-ink, #23282d) !important; font-size: 18px !important; }
	.main_head .all_r_delivery .big-number .font-small { color: var(--gsm-ink-2, #5f6b78); opacity: 1; }

	/* Вход: иконка, при наведении — «Войти» и «Регистрация» */
	.main_head .user_td, .main_head .user.new_user { flex: none !important; flex-direction: row; align-items: center; gap: 10px; height: auto; margin: 0 !important; }
	.main_head .user.new_user > div[style*="display: flex"] { align-items: center; gap: 10px; }
	.main_head .new_user_pad_div.login_mobile { display: none !important; }
	.main_head #login_block { position: relative; width: var(--hh); padding: 0; }
	.main_head #login_href { margin: 0; }
	.main_head #login_href > div, .main_head #login_head_button > div:not(#login_enter_icon) { display: none !important; }
	.main_head #login_head_button { display: flex; align-items: center; justify-content: center; width: var(--hh); height: var(--hh); }
	.main_head #login_enter_icon { width: 22px; height: 22px; margin: 0; background-size: contain; }
	.main_head .gsm-login-pop {
		display: flex; visibility: hidden; opacity: 0; transform: translateY(-4px);
		position: absolute; top: 100%; right: 0; z-index: 60; flex-direction: column; gap: 8px; width: 200px;
		margin-top: 8px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(4, 40, 78, .25);
		transition: opacity .15s, transform .15s, visibility 0s .15s;
	}
	.main_head .gsm-login-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* мостик для мыши */
	.main_head #login_block:hover .gsm-login-pop, .main_head #login_block:focus-within .gsm-login-pop { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
	.main_head .gsm-login-pop .gsm-btn { width: 100%; }
	.main_head .gsm-login-pop .gsm-btn--secondary, .main_head .gsm-login-pop .gsm-btn--secondary:link, .main_head .gsm-login-pop .gsm-btn--secondary:visited { color: var(--gsm-ink, #23282d) !important; font-size: 14px; }
	.main_head .gsm-login-pop .gsm-btn { font-size: 14px; font-weight: 600; }

	/* Избранное и корзина */
	.main_head .new_izb_block { height: var(--hh); margin: 0; }
	.main_head .izb_top { padding: 0 12px; }
	.main_head .new_basket_block { padding: 0 14px 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .main_head .gsm-login-pop { transition: none; } }

/* ── Шапка v2: иконки без подложек, меню при наведении (16.09.2026) ─────── */
@media (min-width: 761px) {
	/* Только иконки: без плашек, при наведении — лёгкая подсветка */
	.main_head .gsm-hbtn, .main_head #login_block, .main_head .izb_top, .main_head .new_basket_block,
	.main_head .new_user_pad_div:not(.login_mobile) { background: transparent !important; box-shadow: none; }
	.main_head .gsm-hbtn:hover, .main_head #login_block:hover, .main_head .izb_top:hover, .main_head .new_basket_block:hover,
	.main_head .all_r_delivery.is-open .gsm-hbtn, .main_head .new_user_pad_div:not(.login_mobile):hover { background: rgba(255, 255, 255, .12) !important; }
	.main_head .user.new_user > div[style*="display: flex"] { gap: 4px; }
	.main_head .user.new_user { gap: 4px; }

	/* Избранное: ноль не показываем */
	.main_head .num_izb.empty { display: none !important; }
	.main_head .izb_top { min-width: var(--hh); padding: 0 10px; gap: 6px; }

	/* Пользователь вошёл: иконка, при наведении — имя и меню */
	.main_head .new_user_pad_div:not(.login_mobile) {
		position: relative; display: flex; align-items: center; justify-content: center;
		width: var(--hh); height: var(--hh); margin: 0; padding: 0 !important; border-radius: 12px; cursor: pointer;
	}
	.main_head .new_user_pad_div:not(.login_mobile) h2.own_cab { display: flex; margin: 0; padding: 0; }
	.main_head .new_user_pad_div:not(.login_mobile) .user_block_with_avatar { display: flex; align-items: center; justify-content: center; width: var(--hh); height: var(--hh); margin: 0; padding: 0; }
	.main_head .new_user_pad_div:not(.login_mobile) .user_block_with_avatar img { width: 24px; height: 24px; margin: 0; padding: 0; }
	.main_head .new_user_pad_div:not(.login_mobile) .user_block_with_avatar span,
	.main_head .new_user_pad_div:not(.login_mobile) .own_cab_1 { display: none !important; }
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab_wrap {
		display: block !important; visibility: hidden; opacity: 0; transform: translateY(-4px);
		position: absolute; top: 100%; right: 0; left: auto; z-index: 60; width: 240px; margin: 0; padding: 8px 0 0;
		transition: opacity .15s, transform .15s, visibility 0s .15s;
	}
	.main_head .new_user_pad_div:not(.login_mobile):hover .advanced_own_cab_wrap,
	.main_head .new_user_pad_div:not(.login_mobile):focus-within .advanced_own_cab_wrap { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab {
		width: auto !important; margin: 0 !important; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(4, 40, 78, .25);
	}
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab::after { display: none; }
	.main_head .gsm-umenu__name { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--gsm-line, #e4e8ec);
		color: var(--gsm-ink, #23282d); font-size: 15px; font-weight: 700; line-height: 1.3; white-space: normal; cursor: default; }
	/* Раздел «Администратор» в меню под иконкой (23.09.2026) */
	.main_head .gsm-umenu__group { padding: 10px 10px 4px; color: var(--gsm-ink-3, #949ba5); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; cursor: default; }
	.main_head .gsm-umenu__sep { height: 1px; margin: 6px 10px; background: var(--gsm-line, #e4e8ec); }
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab a,
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab a:link,
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab a:visited { display: block; padding: 8px 10px; border-radius: 8px; color: var(--gsm-ink, #23282d); font-size: 14px; text-decoration: none; }
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab a:hover { margin: 0; padding: 8px 10px; background: var(--gsm-bg, #f6f7f9); color: var(--gsm-link-hover, #1f5f86); text-decoration: none; }
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab a { margin: 0 !important; border: 0 !important; }
	/* старый скрипт при наведении ставит .active — белая плашка и серая иконка не нужны */
	.main_head .new_user_pad_div.active:not(.login_mobile) { box-shadow: none; border-radius: 12px; }
	.main_head .new_user_pad_div.active:not(.login_mobile) img { filter: none; }
	.main_head .new_user_pad_div:not(.login_mobile) h2 { width: auto; }
	.main_head .new_user_pad_div:not(.login_mobile) .advanced_own_cab a::after { display: none !important; }

	/* Бонусы — при наведении на корзину */
	.main_head .gsm-cartwrap { position: relative; display: flex; align-items: center; }
	.main_head .gsm-cartwrap .bonus_info {
		display: flex !important; visibility: hidden; opacity: 0; transform: translateY(-4px);
		position: absolute; top: 100%; right: 0; z-index: 60; height: auto; margin: 8px 0 0; padding: 10px 14px; white-space: nowrap;
		border-radius: 12px; background: #fff !important; color: var(--gsm-ink, #23282d); font-size: 14px; font-weight: 600;
		box-shadow: 0 10px 30px rgba(4, 40, 78, .25); transition: opacity .15s, transform .15s, visibility 0s .15s;
	}
	.main_head .gsm-cartwrap .bonus_info::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
	.main_head .gsm-cartwrap:hover .bonus_info { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
}

/* ── Выбор города в шапке: новое оформление (17.09.2026) ───────────────────
   Разметка и скрипт прежние (.city-celector .all_goroda_select_div), меняется только вид.
   Выбор города на оформлении заказа не затрагивается — правила только внутри .city-celector. */
.new_popup .city-celector.new_popup_div, .city-celector.new_popup_div {
	box-sizing: border-box; width: 320px !important; padding: 12px !important; background-color: var(--gsm-card, #fff) !important;
	border-radius: var(--gsm-r-lg, 16px); background: var(--gsm-card, #fff);
	box-shadow: 0 12px 32px rgba(20, 28, 38, .18), 0 2px 6px rgba(20, 28, 38, .06);
	font-family: var(--gsm-font, 'Open Sans', Tahoma, Verdana, Arial, sans-serif);
}
.city-celector .all_goroda_select_div { display: block; max-width: none; width: 100%; min-width: 0; }
/* Выбранный город — заголовком карточки */
.city-celector .all_goroda_select_div .arrow_down { display: none; }
.city-celector .all_goroda_select_div input.what_kladr {
	display: block; width: 100%; height: auto; margin: 0 0 10px; padding: 2px 4px 0 26px !important;
	border: 0; border-radius: 0; background: transparent no-repeat 0 50% / 18px 18px; box-shadow: none; outline: none; cursor: default;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f89c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	color: var(--gsm-ink, #23282d); font: 600 var(--gsm-fs-md, 15px)/1.3 var(--gsm-font, 'Open Sans', Tahoma, Verdana, Arial, sans-serif);
	text-overflow: ellipsis;
}
/* Список — не всплывающий слой, а часть карточки */
.city-celector .all_goroda_select_div .kladr_select {
	position: static; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.city-celector .all_goroda_select_div .kladr_select > p { margin: 0; }
.city-celector .all_goroda_select_div .kladr_select input.find_in_select {
	display: block; width: 100%; height: 40px; margin: 0; padding: 0 12px 0 38px;
	border: 1px solid var(--gsm-line-strong, #ccd3da); border-radius: var(--gsm-r-btn, 10px); box-sizing: border-box;
	background: #fff no-repeat 12px 50% / 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949ba5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	color: var(--gsm-ink, #23282d); font: 400 var(--gsm-fs-base, 14px)/1 var(--gsm-font, 'Open Sans', Tahoma, Verdana, Arial, sans-serif);
	transition: border-color .15s, box-shadow .15s;
}
.city-celector .all_goroda_select_div .kladr_select input.find_in_select::placeholder { color: var(--gsm-ink-3, #949ba5); }
.city-celector .all_goroda_select_div .kladr_select input.find_in_select:focus {
	border-color: var(--gsm-blue, #3399cc); box-shadow: var(--gsm-focus, 0 0 0 3px rgba(51, 153, 204, .15)); outline: none;
}
.city-celector .all_goroda_select_div .kladr_select > div.select_body {
	max-height: 320px; margin: 8px -4px 0 0; padding: 0 4px 0 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
.city-celector .all_goroda_select_div .kladr_select div.select_body > div {
	display: block; margin: 0; padding: 8px 10px; border-radius: var(--gsm-r-sm, 8px);
	background: transparent; color: var(--gsm-ink, #23282d); font-size: var(--gsm-fs-base, 14px); line-height: 1.3; text-align: left;
	transition: background-color .12s;
}
.city-celector .all_goroda_select_div .kladr_select div.select_body > div span {
	display: block; margin: 1px 0 0; color: var(--gsm-ink-3, #949ba5); font-size: var(--gsm-fs-xs, 12px);
}
.city-celector .all_goroda_select_div .kladr_select div.select_body > div:hover { background: var(--gsm-bg, #f6f7f9); }
.city-celector .all_goroda_select_div .kladr_select div.select_body > div[selected="selected"],
.city-celector .all_goroda_select_div .kladr_select div.select_body > div.selected_kladr {
	position: relative; padding-right: 32px; background: var(--gsm-blue-soft, #f0f8fc); color: var(--gsm-btn-hover, #1f6f97); font-weight: 600;
}
body .city-celector .all_goroda_select_div .kladr_select div.select_body > div[selected="selected"] span,
body .city-celector .all_goroda_select_div .kladr_select div.select_body > div.selected_kladr span { color: var(--gsm-ink-2, #5f6b78); font-weight: 400; }
.city-celector .all_goroda_select_div .kladr_select div.select_body > div[selected="selected"]::after {
	content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f89c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.city-celector .all_goroda_select_div .kladr_select div.select_body > div[value="-1"] { display: none; }
.city-celector .all_goroda_select_div .kladr_select div.select_body > p { margin: 8px 10px; color: var(--gsm-ink-3, #949ba5); font-size: var(--gsm-fs-sm, 13px); }
@media (max-width: 420px) { .city-celector.new_popup_div { width: calc(100vw - 24px) !important; } }
@media (prefers-reduced-motion: reduce) { .city-celector .all_goroda_select_div .kladr_select div.select_body > div { transition: none; } }


/* ── Заказ списком: значок в шапке и выпадающая панель (23.09.2026) ───────── */
.gsm-qo { position: relative; display: flex; align-items: center; }
.gsm-qo__btn {
	display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; margin: 0;
	border: 0; border-radius: var(--gsm-r-sm, 8px); background: none; color: #fff; cursor: pointer;
	font: inherit; font-size: var(--gsm-fs-sm, 13px); font-weight: 600; white-space: nowrap;
}
.gsm-qo__btn svg { width: 22px; height: 22px; }
.gsm-qo__btn:hover, .gsm-qo.is-open .gsm-qo__btn { background: rgba(255, 255, 255, .14); }
.gsm-qo__cap { display: none; }
.gsm-qo__pop {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 360px; max-width: 92vw;
	padding: 14px 16px; border-radius: var(--gsm-r-card, 14px); background: var(--gsm-card, #fff);
	box-shadow: 0 12px 32px rgba(20, 28, 38, .22); text-align: left;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.gsm-qo.is-open .gsm-qo__pop { opacity: 1; visibility: visible; transform: translateY(0); }
.gsm-qo__t { margin-bottom: 4px; color: var(--gsm-ink, #23282d); font-size: var(--gsm-fs-lg, 18px); font-weight: 700; }
.gsm-qo__pop .gsm-muted { margin: 0 0 8px; }
.gsm-qo__pop textarea { width: 100%; margin: 0 0 8px; font-family: inherit; font-size: 13px; line-height: 1.5; }
.gsm-qo__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.gsm-qo__res { margin-top: 10px; max-height: 240px; overflow-y: auto; color: var(--gsm-ink, #23282d); }
.gsm-qo__list { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
/* 27.09.2026: в шапке — только значок; окно «Заказ списком» открывается при наведении (как меню аккаунта),
   пока фокус в поле — не закрывается; мостик ::before — чтобы мышь дошла до окна */
@media (hover: hover) {
	.gsm-qo:hover .gsm-qo__pop, .gsm-qo:focus-within .gsm-qo__pop { opacity: 1; visibility: visible; transform: translateY(0); }
	.gsm-qo:hover .gsm-qo__btn { background: rgba(255, 255, 255, .14); }
	.gsm-qo__pop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
}
@media (max-width: 760px) { .gsm-qo { display: none; } }


/* Средняя ширина окна 761–1099 (27.10.2026, жалоба: шапка «плывёт»): компактная шапка как на широком
   экране, но без лишнего — логотип, каталог, поиск, кабинет и корзина. Город, телефон, быстрый заказ
   и избранное в шапке скрыты (город и телефон есть в подвале, избранное — в кабинете). */
@media (min-width: 761px) and (max-width: 1099px) {
	.main_head .all_r_delivery,
	.main_head .gsm-qo,
	.main_head .new_izb_block { display: none !important; }
	.main_head .logo_div span { display: none; }
	.main_head .back_call_td { flex: 1 1 auto; min-width: 0; }
	/* колонки каталога слева на этой ширине нет — кнопка «Каталог» нужна */
	body:has(td.left_gl_cell) .main_head .gsm-cat-wrap { display: flex; }
	/* Полный логотип «GSM-ОПТ» вместо значка: на этой ширине место есть (старые стили до 1100 px прятали его) */
	.main_head .logo_m_div { display: none !important; }
	.main_head .logo_div { display: flex !important; }
	.main_head .logo_block { width: auto; flex: none; padding: 0; }
	.main_head .logo_block .logo_img { width: 150px; height: auto; }
	/* Кнопка поиска со значком лупы: значок по центру кнопки (был прижат кверху) */
	.main_head .pod_header_tab .go_new_poisk { display: flex; align-items: center; justify-content: center; padding: 0 16px; }
	.main_head .pod_header_tab .go_new_poisk .butt_img { position: static; display: block; margin: 0; }
}