/* Пресет «Магазин медицинский»: самостоятельная вёрстка без UEB. Настройки приходят CSS-переменными с корня .bs-sm. */
.bs-sm {
    --bs-sm-top-bg: var(--extra_color);
    --bs-sm-catalog-bg: var(--second_color);
    --bs-sm-catalog-hover: var(--second_color_hover);
    --bs-sm-catalog-color: var(--white_color);
    --bs-sm-menu-size: 17px;
    --bs-sm-phone-size: 17px;
    --bs-sm-top-height: 63px;
    --bs-sm-main-height: 112px;
    --bs-sm-gap: 16px;
    display: contents; /* липкий этаж должен считать контейнером страницу, а не шапку */
    color: var(--text_color);
}
#btc-header-container:has(> .bs-sm) { display: contents; }
/* Отступ получают только страницы с хлебными крошками; баннер главной прижат к шапке. */
#btc-header-container:has(> .bs-sm) + .bread_main_wrap { padding-top: 32px; }

.bs-sm__row { display: flex; align-items: center; justify-content: space-between; }

/* ── Верхняя полоса ── */
.bs-sm__top { background: var(--bs-sm-top-bg); }
.bs-sm__row--top { min-height: var(--bs-sm-top-height); gap: 12px; }
.bs-sm-menu { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bs-sm-menu > li { position: relative; list-style: none; }
.bs-sm-menu > li > a { display: block; color: var(--text_color); font-size: var(--bs-sm-menu-size); line-height: 1.6; white-space: nowrap; transition: color .2s ease; }
.bs-sm-menu > li > a:hover, .bs-sm-menu > li.current-menu-item > a { color: var(--main_color); }
.bs-sm-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 1001; min-width: 220px; margin: 0; padding: 10px 0; list-style: none; background: var(--white_color); border-radius: var(--middle_border_radius); box-shadow: 0 10px 30px color-mix(in srgb, var(--text_color) 15%, transparent); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.bs-sm-menu > li:hover > .sub-menu, .bs-sm-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.bs-sm-menu .sub-menu li { list-style: none; }
.bs-sm-menu .sub-menu a { display: block; padding: 8px 20px; color: var(--text_color); font-size: 15px; white-space: nowrap; }
.bs-sm-menu .sub-menu a:hover { color: var(--main_color); }

.bs-sm-contact { display: inline-flex; align-items: center; gap: 8px; color: var(--text_color); font-size: 17px; line-height: 1; white-space: nowrap; text-decoration: none; }
.bs-sm-contact__icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--main_color); }
.bs-sm-contact__icon svg { display: block; width: 100%; height: 100%; }
.bs-sm-contact--phone .bs-sm-contact__text { font-size: var(--bs-sm-phone-size); font-weight: 700; }
.bs-sm-contact--callback .bs-sm-contact__text { color: var(--main_color); font-weight: 700; }

/* ── Основной этаж ── */
.bs-sm__main { position: relative; background: var(--white_color); }
/* Мягкая тень под этажом — как у прежней шапки (градиент основного цвета, 36px). */
.bs-sm__main::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 36px; background: linear-gradient(to bottom, var(--main_color), transparent); opacity: .1; pointer-events: none; }
.bs-sm--sticky .bs-sm__main { position: sticky; top: 0; z-index: 900; }
.admin-bar .bs-sm--sticky .bs-sm__main { top: 32px; }
.bs-sm__row--main { position: relative; min-height: var(--bs-sm-main-height); gap: var(--bs-sm-gap); }

/* Логотип: базовые правила компонента продублированы (scoped), чтобы шапка не зависела от ueb-styles.css. */
.bs-sm__logo { display: flex; flex: 0 0 auto; } /* flex, а не блок: у inline-flex логотипа есть строчный хвост снизу, он смещал логотип вверх */
.bs-sm__logo .blocksee-logo { display: inline-flex; align-items: center; margin: 0; opacity: var(--blocksee-logo-opacity, 1); }
.bs-sm__logo .blocksee-logo__link { display: inline-flex; align-items: center; gap: var(--blocksee-logo-gap, 18px); color: inherit; text-decoration: none; }
.bs-sm__logo .blocksee-logo__image { width: var(--blocksee-logo-width, 180px); height: auto; flex-shrink: 0; }
.bs-sm__logo .blocksee-logo__image--lightened { display: none; }
.bs-sm__logo .blocksee-logo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--blocksee-logo-text-font, var(--font-title)); }
.bs-sm__logo .blocksee-logo__title { font-weight: var(--blocksee-logo-title-weight, 600); font-size: var(--blocksee-logo-title-size, 16px); line-height: 1.2; color: var(--blocksee-logo-title-color, var(--text_color)); opacity: var(--blocksee-logo-title-opacity, 1); }
.bs-sm__logo .blocksee-logo__subtitle { font-size: var(--blocksee-logo-subtitle-size, 14px); font-weight: var(--blocksee-logo-subtitle-weight, 400); line-height: 1.6; color: var(--blocksee-logo-subtitle-color, var(--text_color)); opacity: var(--blocksee-logo-subtitle-opacity, .7); }

.bs-sm__center { display: flex; align-items: center; gap: var(--bs-sm-gap); min-width: 0; }

/* Кнопка каталога: компонент темы, цвета — из настроек пресета. Панель встаёт под этаж на всю ширину ряда. */
.bs-sm .bsh-grid { --bsh-grid-font: 17px; }
.bs-sm .bsh-grid-trigger:hover, .bs-sm .bsh-grid.is-open .bsh-grid-trigger { background: var(--bs-sm-catalog-hover); color: var(--bs-sm-catalog-color); }
.bs-sm .bsh-grid-panel { color: var(--text_color); }
.bs-sm .bsh-grid-content > a { font-size: 16px; line-height: 1.6; }
.bs-sm .bsh-grid-content > a:hover { color: inherit; }
.bs-sm .bsh-grid-content > ul > li > a { font-size: 13px; line-height: 1.6; }
.bs-sm .bsh-grid-content > ul > li > a:hover { color: var(--main_color_hover); }

/* Поиск: штатная форма каталога [blocksee_search], оформление поля — как у прежней шапки. */
.bs-sm__search { flex: 0 0 auto; width: 430px; min-width: 200px; max-width: 100%; }
.bs-sm__search .blocksee-search-wrapper,
.bs-sm__search .blocksee-search-form,
.bs-sm__search .blocksee-search-input-wrapper { position: relative; width: 100%; min-width: 0; }
.bs-sm__search input[type="search"] { box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0 48px 0 16px; background: transparent; color: var(--text_color); border: 1px solid color-mix(in srgb, var(--text_color) 20%, transparent); border-radius: var(--button_border_radius); font-family: var(--font); font-size: 15px; }
.bs-sm__search input[type="search"]::placeholder { color: var(--text_color); opacity: .6; }
.bs-sm__search .blocksee-search-button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; padding: 0; background: none; border: 0; color: var(--text_color); cursor: pointer; }
.bs-sm__search .blocksee-search-button svg { display: block; width: 20px; height: 20px; }

/* Действия: иконка сверху, подпись снизу. */
.bs-sm__actions { display: flex; align-items: center; gap: var(--bs-sm-gap); flex: 0 0 auto; }
.bs-sm-action { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text_color); text-decoration: none; }
.bs-sm-action__icon { position: relative; display: block; width: 26px; height: 26px; }
.bs-sm-action__icon svg { display: block; width: 100%; height: 100%; }
.bs-sm-action__label { color: var(--extra_color_2); font-size: 17px; font-weight: 500; line-height: 1; white-space: nowrap; }
.bs-sm-action__count { position: absolute; top: -5px; left: 50%; z-index: 1; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: var(--main_color); color: var(--white_color); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.bs-sm-action--contact { gap: 4px; }
.bs-sm-action--contact .bs-sm-action__icon { width: 30px; height: 30px; color: var(--main_color); }
.bs-sm-action--contact .bs-sm-action__label { color: var(--main_color); }

/* Адаптив: ниже 991px работает мобильная панель темы. */
@media (max-width: 1490px) {
    .bs-sm__search { width: 250px; }
}
@media (max-width: 1080px) {
    .bs-sm-contact--worktime { display: none; } /* уже 1080px полоса не вмещает все контакты */
}
@media (max-width: 990px) {
    .bs-sm__top, .bs-sm__main { display: none; }
}