/*
 * Телефон (до 1000 px): нижнее меню сайта — Главная, Каталог, Избранное, Корзина, Профиль (front/templates/mobile-nav.blade.php,
 * js/mobile-nav.js) и окна «Каталог» (поиск и разделы по уровням), «Профиль». На компьютере не показываются.
 * «Бургер» и корзина в шапке на телефоне спрятаны — всё это теперь в нижнем меню.
 */
.mnav,
.msheet { display: none; }

@media (max-width: 1000px) {
    :root { --mnav-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
    body { padding-bottom: var(--mnav-h); }

    /* ── нижнее меню ──
       белая «юбка» под меню (вторая тень: 0 90px 0 90px) — Chrome и Vivaldi на iPhone (iOS 26, ошибка WebKit 297779)
       иногда оставляют закреплённое меню на высоте своей спрятанной панели, и под ним просвечивала страница. Тень не
       меняет размер страницы (в отличие от сдвига меню — тот давал «бесконечную» прокрутку), а в обычном случае
       она за нижним краем экрана и не видна */
    .mnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; display: flex; height: var(--mnav-h);
        padding: 0 4px env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid #ECEEF1;
        box-shadow: 0 -2px 12px rgba(30, 40, 60, .06), 0 90px 0 90px #fff; }
    /* открыта клавиатура (поле ввода в фокусе) — меню не нужно */
    html.kb-open .mnav { display: none; }
    .mnav-item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: #6B7178 !important; font-family: inherit; font-size: 11px;
        line-height: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mnav-item .ui-ic { width: 25px; height: 25px; }
    .mnav-item span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .mnav-item.is-active,
    .mnav-item.is-open { color: #303030 !important; font-weight: 800; }
    .mnav-item.is-active .ui-ic,
    .mnav-item.is-open .ui-ic { stroke-width: 2.15; }
    /* открыто окно «Каталог» или «Профиль» — выделен только этот пункт (не раздел, где находимся) */
    .mnav.has-open .mnav-item.is-active:not(.is-open) { color: #6B7178 !important; font-weight: 600; }
    .mnav.has-open .mnav-item.is-active:not(.is-open) .ui-ic { stroke-width: 1.75; }
    .mnav-item:focus { outline: none; }
    .mnav-item:focus-visible { box-shadow: inset 0 0 0 2px #303030; border-radius: 10px; }
    .mnav-badge { position: absolute; top: 4px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff;
        border-radius: 10px; background: #DD2C01; color: #fff; font-size: 10px; line-height: 14px; font-weight: 800; font-style: normal;
        text-align: center; box-sizing: border-box; }
    .mnav-badge[hidden] { display: none; }
    /* окна во весь экран (поиск с подсказками, фильтр каталога) — меню не мешает их кнопкам внизу */
    html.active .mnav,
    html.active .msheet { display: none; }

    /* ── окна «Каталог» и «Профиль» — над страницей, под нижним меню ── */
    .msheet { position: fixed; left: 0; right: 0; top: 0; bottom: var(--mnav-h); z-index: 1000; display: flex; flex-direction: column;
        background: #fff; opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .18s ease; }
    .msheet[hidden] { display: none; }
    .msheet.is-on { opacity: 1; transform: none; }
    html.mnav-open,
    html.mnav-open body { overflow: hidden; }
    .msheet-top { flex: 0 0 auto; padding: 14px 16px 6px; }
    .msheet-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1px solid #E3E6EA;
        border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(30, 40, 60, .06); color: #9A9A9A; font-family: inherit;
        font-size: 16px; text-align: left; cursor: text; }
    .msheet-search .ui-ic { flex: 0 0 22px; width: 22px; height: 22px; color: #6B7178; }
    .msheet-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .msheet-body { position: relative; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: 0 16px 12px; overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch; }

    /* строки окон: значок, название, «›» */
    .mrow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; margin: 0; padding: 6px 0; border: 0; background: none;
        color: #303030 !important; font-family: inherit; font-size: 17px; line-height: 22px; font-weight: 500; text-align: left;
        text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mrow:active { background: #F7F8FA; }
    .mrow-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; color: #303030; }
    .mrow-ic .ui-ic { width: 24px; height: 24px; }
    .mrow-ic.is-img img { display: block; width: 28px; height: 28px; object-fit: contain; }
    .mrow-name { flex: 1 1 auto; min-width: 0; }
    .mrow-n { flex: 0 0 auto; color: #8A8F96; font-size: 16px; font-style: normal; }
    .mrow-n[hidden] { display: none; }
    .mrow-chev { flex: 0 0 20px; width: 20px; height: 20px; color: #9AA0A6; }
    .mrow-sep { height: 1px; margin: 8px 0; background: #ECEEF1; }

    /* каталог по уровням: «‹ Раздел», «Все товары раздела», подразделы */
    .mcat-level { display: none; }
    .mcat-level.is-on { display: block; animation: mcat-in .2s ease; }
    .mcat-level.is-on.is-back { animation-name: mcat-back; }
    @keyframes mcat-in {
        from { opacity: 0; transform: translateX(28px); }
        to { opacity: 1; transform: none; }
    }
    @keyframes mcat-back {
        from { opacity: 0; transform: translateX(-28px); }
        to { opacity: 1; transform: none; }
    }
    .mcat-back { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 12px 0 8px; border: 0; background: none; color: #303030;
        font-family: inherit; font-size: 20px; line-height: 26px; font-weight: 800; text-align: left; cursor: pointer; }
    .mcat-back .ui-ic { flex: 0 0 24px; width: 24px; height: 24px; margin-left: -4px; color: #303030; transform: rotate(180deg); }
    .mrow.is-all { color: #1C3697 !important; font-weight: 700; }
    .mrow.is-all .mrow-chev { color: #1C3697; }
    .mcat-load { padding: 20px 0; color: #9A9A9A; font-size: 15px; }
    /* фото подразделов: грузятся только для открытого уровня и только видимые строки (loading="lazy"); пока фото
       грузится — серая мерцающая заглушка, потом фото плавно проявляется */
    .mrow-pic { position: relative; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; box-sizing: border-box; border: 1px solid transparent;
        border-radius: 10px; background: #EEF0F2; }
    .mrow-pic img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s ease; }
    .mrow-pic::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
        animation: mrow-shimmer 1.15s ease-in-out infinite; }
    @keyframes mrow-shimmer { 100% { transform: translateX(100%); } }
    .mrow-pic.is-ok { border-color: #EEF0F2; background: #fff; }
    .mrow-pic.is-ok img { opacity: 1; }
    .mrow-pic.is-ok::after,
    .mrow-pic.is-err::after,
    .mrow-pic.is-none::after,
    .mrow-pic.is-all::after { content: none; }
    /* «Все товары раздела» — значок вместо фото */
    .mrow-pic.is-all { display: flex; align-items: center; justify-content: center; background: #EEF2FB; color: #1C3697; }
    .mrow-pic.is-all .ui-ic { width: 22px; height: 22px; }
    @media (prefers-reduced-motion: reduce) {
        .mrow-pic::after { animation: none; }
        .mrow-pic img { transition: none; }
    }

    /* профиль */
    .mprof-head { padding: 20px 0 8px; }
    .mprof-title { font-size: 22px; line-height: 28px; font-weight: 800; color: #303030; }
    .mprof-lead { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: #4F4F4F; }
    .mprof-btns { display: flex; gap: 10px; margin-top: 16px; }
    .mprof-btn { flex: 1 1 0; height: 48px; margin: 0; border: 1px solid #D5D9DE; border-radius: 10px; background: #fff; color: #303030;
        font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
    .mprof-btn.is-main { border-color: #FEDC29; background: #FEDC29; }
    .mprof-sec { margin-top: 18px; padding: 16px 0 4px; border-top: 1px solid #ECEEF1; font-size: 13px; line-height: 18px; font-weight: 800;
        color: #9A9A9A; text-transform: uppercase; letter-spacing: .03em; }
    .mprof-langs { display: flex; gap: 8px; padding: 8px 0 4px; }
    .mprof-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 40px; border-radius: 10px; background: #F0F2F4;
        color: #303030 !important; font-size: 15px; font-weight: 800; text-decoration: none !important; }
    .mprof-lang.is-on { background: #FEDC29; }
    .mprof-out { color: #DD2C01 !important; }
    .mprof-out .mrow-ic { color: #DD2C01; }

    /* «наверх» — над нижним меню */
    .top { bottom: calc(var(--mnav-h) + 12px) !important; }
}

/* ── шапка сайта на телефоне (по мотивам конкурента): логотип слева, справа язык RU | RO и «Заказать звонок»;
   ниже — поиск серым полем с лупой. «Бургер» и значки (корзина, избранное, сравнение) — в нижнем меню ── */
.mhead-acts { display: none; }
@media (max-width: 1000px) {
    body { margin-top: 124px; }
    .header-nav { padding-top: 8px !important; padding-bottom: 70px !important; }
    .mob-head .burger,
    .mob-head .nav-url { display: none !important; }
    .mob-head .logo { flex: 0 1 auto; max-width: none; padding-left: 15px; text-align: left; }
    .mob-head .logo img { display: block; width: 132px; height: 44px; object-position: left center; }
    .mhead-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-right: 15px; }
    .mhead-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: #F0F2F4; }
    .mhead-lang a,
    .mhead-lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 34px; padding: 0 8px;
        border-radius: 9px; font-size: 14px; line-height: 1; font-weight: 800; letter-spacing: .02em; text-decoration: none !important; }
    .mhead-lang a { color: #6B7178 !important; -webkit-tap-highlight-color: transparent; }
    .mhead-lang .is-on { background: #FEDC29; color: #303030; }
    .mhead-call { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0;
        border: 0; border-radius: 12px; background: #F0F2F4; color: #303030; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mhead-call .ui-ic { width: 20px; height: 20px; }
    .mhead-call:focus { outline: none; }
    .mhead-call:focus-visible { box-shadow: 0 0 0 2px #303030; }
    /* поиск: серое поле с лупой слева (кнопку «Найти» заменяет «Найти» на клавиатуре); открытый поиск — как был */
    .mob-head .search:not(.active) { top: calc(100% + 10px); }
    .search:not(.active) .search-form input.smart-search-input { height: 48px; padding: 0 16px 0 46px; border: 1px solid #F2F3F5; border-radius: 12px;
        background: #F2F3F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px 50% / 20px 20px;
        color: #303030; font-size: 16px; box-shadow: none; -webkit-appearance: none; appearance: none; }
    .search:not(.active) .search-form input.smart-search-input::placeholder { color: #8A8F96; opacity: 1; }
    .search:not(.active) .smart-search-button { display: none !important; }
}

/* окно cookie — над нижним меню; жёлтая вкладка «Настройки cookie» на телефоне — в «Профиле» */
@media (max-width: 1000px) {
    .cookie-wrapper { bottom: var(--mnav-h); }
    .cookie-inner.closed .open-cookie { display: none; }
    /* подвал: соцсети (их стало пять — с TikTok) и «Принимаем к оплате» — в строку; не помещаются (узкий телефон) —
       оплата целиком строкой ниже, а не логотипы карт столбиком */
    .wrapper-social { flex-wrap: wrap; gap: 14px 12px; }
    .wrapper-social .block-pay-methods { flex: 0 0 auto; }
}

/* ── открытый поиск на телефоне (во весь экран): поле — как в шапке (серое, с лупой), «✕» — светлая кнопка;
   разделы подсказок и строки — как в окнах «Каталог» и «Профиль». Сами подсказки — прежние (smart-search-v2) ── */
@media (max-width: 1000px) {
    .search.active .search-form { padding: 12px 0 10px; }
    .search.active form { gap: 10px; }
    .search.active .search-form input.smart-search-input { flex: 1 1 auto; width: auto; min-width: 0; height: 48px; padding: 0 16px 0 46px;
        border: 1px solid #F2F3F5; border-radius: 12px; color: #303030; font-size: 16px; box-shadow: none; -webkit-appearance: none; appearance: none;
        background: #F2F3F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px 50% / 20px 20px; }
    .search.active .search-form input.smart-search-input:focus { border-color: #FEDC29; background-color: #fff; outline: none; }
    .search.active .search-form input.smart-search-input::placeholder { color: #8A8F96; opacity: 1; }
    .search.active button.smart-search-button { display: none !important; }
    .search.active .close-search { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background-color: #F0F2F4; cursor: pointer; }
    .search.active .close-search svg { width: 18px; height: 18px; fill: #303030; }
    .search.active .smart-search { padding-top: 70px; }
    /* заголовки разделов: «Популярные запросы», «Искать», «Поиск по товарам» */
    .search.active .smart-search .search-category { margin: 16px 0 4px; font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .03em;
        color: #9A9A9A; }
    /* запросы и разделы — строки с лупой (разделы — без значка); серая подсветка выходит на 12 px за значок, фото и текст
       (отрицательный отступ — текст остаётся на месте, вровень с заголовками) */
    .search.active .smart-search .result-categorys a { display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0 -12px;
        padding: 10px 12px; border-radius: 12px; color: #303030; font-size: 16px; line-height: 22px; text-decoration: none; }
    .search.active .smart-default .result-categorys a::before { content: ''; flex: 0 0 18px; width: 18px; height: 18px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F96' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E") no-repeat center / 18px 18px; }
    .search.active .smart-search .vs-ico { flex: 0 0 18px; width: 18px; height: 18px; fill: #8A8F96; }
    /* подсветка — нажатие, наведение, выбор стрелками — одним светло-серым */
    .search.active .smart-search .result-categorys a:hover,
    .search.active .smart-search .result-categorys a:active,
    .search.active .smart-search .result-categorys .vs-opt.is-active,
    .search.active .smart-search .row-result-item:hover,
    .search.active .smart-search .row-result-item:active,
    .search.active .smart-search .vs-dd-item.is-active { background: #F2F3F5; }
    /* товары: фото в рамке, название в 2 строки, цена жирно */
    .search.active .smart-search .row-result-item { flex-wrap: nowrap; align-items: center; margin: 0 -12px; padding: 10px 12px; border-radius: 12px; }
    .search.active .smart-search .row-result-item > .col-3 { flex: 0 0 68px; max-width: 68px; padding: 0 12px 0 0 !important; }
    .search.active .smart-search .row-result-item > .col-9 { flex: 1 1 auto; max-width: none; min-width: 0; }
    .search.active .smart-search .row-result-item img { display: block; width: 56px; height: 56px; max-height: none; padding: 4px;
        border: 1px solid #EAEAEA; border-radius: 10px; background: #fff; object-fit: contain; }
    .search.active .smart-search .result-name-item { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
        font-size: 14px; line-height: 19px; color: #303030; }
    .search.active .smart-search .result-price-item { margin: 4px 0 0 !important; font-size: 16px; line-height: 20px; font-weight: 800; color: #303030; }
    .search.active .smart-search .vs-dd-all { border-radius: 12px; }
}
/* открытие поиска на телефоне — плавно: белый фон проявляется, поле «переезжает» из шапки наверх (откуда — --msearch-from,
   задаёт mobile-nav.js), подсказки мягко поднимаются. Только прозрачность и сдвиг — без изменения размеров */
@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
    .search.active { animation: msearch-bg .24s ease-out; }
    .search.active .search-form { animation: msearch-form .3s cubic-bezier(.2, .8, .2, 1); }
    .search.active .smart-search { animation: msearch-list .32s ease-out; }
    @keyframes msearch-bg {
        from { background-color: rgba(255, 255, 255, 0); }
    }
    @keyframes msearch-form {
        from { transform: translateY(var(--msearch-from, 0px)); }
    }
    @keyframes msearch-list {
        from { opacity: 0; transform: translateY(16px); }
    }
}

/* iPhone со «чёлкой», телефон повёрнут: страница во весь экран (viewport-fit=cover) — содержимое и закреплённые
   полосы отступают от вырезов по бокам (в обычном положении эти отступы — 0) */
@media (max-width: 1000px) {
    body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .head-fix,
    .msheet,
    .pp-sticky { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .mnav { padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-right: max(4px, env(safe-area-inset-right, 0px)); }
}