/* skidki.md mobile redesign: m-shell. Только @media (max-width:900px) — десктоп не трогать */
/* Оболочка по прототипу design_mockups/mobile/E-merged.html: шапка + кайма, нижняя панель, строка поиска над ней,
   тост, подвал. Переопределяет style.css (файл подключён после него). */
@media (max-width:900px){
:root{--m-sat:env(safe-area-inset-top,0px);--m-sab:env(safe-area-inset-bottom,0px);--m-sal:env(safe-area-inset-left,0px);--m-sar:env(safe-area-inset-right,0px);
 --m-tab:76px;          /* нижняя панель без safe-area: кайма 12 + вкладка 64 */
 --m-dock:76px;         /* строка «Что покупаем?» */
 --m-bottom:calc(var(--m-tab) + var(--m-sab))}
body.has-mq:not(.mq-hide){--m-bottom:calc(var(--m-tab) + var(--m-dock) + var(--m-sab))}
html{-webkit-text-size-adjust:100%}
body{font-size:16px;-webkit-tap-highlight-color:transparent;padding:0 calc(16px + var(--m-sar)) calc(var(--m-bottom) + 24px) calc(16px + var(--m-sal))}

/* ---------- шапка: лок-ап слева, язык / skidki+ / избранное справа, тонкая кайма под ней ---------- */
.stitch.top{display:none}
nav.top{min-height:60px;padding:calc(6px + var(--m-sat)) 16px 6px;margin:0 -16px 18px;gap:8px;flex-wrap:nowrap}
nav.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;background:var(--stitch) repeat-x left center/16px 8px,var(--bg);pointer-events:none}
nav.top .brand{min-height:48px;min-width:0;flex:0 1 auto}
nav.top .brand .logo{height:30px;max-width:100%}
.mtop{gap:8px;flex:none}
/* язык в шапке телефона не дублируем: он в подвале (ниже) и в профиле (.acc-lang) — шапка = лого, skidki+, избранное */
.mtop .lang-sw{display:none}
.mplus,.madmin{min-height:48px;font-size:16px;padding:0 16px}
.mfav{width:48px;height:48px}
.mfav .nb{font-size:12px;min-width:20px;height:20px;line-height:20px}

/* город под шапкой: одна строка-чип; пояснение «покажем сети рядом» на телефоне не показываем (чип и так зовёт) */
.locbar{margin:0 0 12px;gap:4px 8px}
.locbar .loc-link{min-height:48px;max-width:100%;padding:0 14px 0 12px;gap:8px;font-size:16px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.locbar .loc-link span{border-bottom:0}
.locbar.ask .loc-link{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.locbar .loc-why{display:none}
.locbar .loc-note{padding:2px 0 0 4px;font-size:16px;line-height:1.4}
.locbar .loc-note .linkbtn{font-size:16px;min-height:48px;margin-left:0}

/* ---------- нижняя панель: кайма-вышивка, иконка + подпись, плашка у активной вкладки ---------- */
nav.bottom{padding:12px calc(4px + var(--m-sar)) var(--m-sab) calc(4px + var(--m-sal));border-top:0;
 background:var(--stitch) repeat-x left top/24px 12px,linear-gradient(var(--bg),var(--bg)) 0 0/100% 12px no-repeat,var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -6px 20px rgba(70,40,20,.06)}
nav.bottom a{min-height:64px;justify-content:center;gap:2px;padding:4px 0;font-size:clamp(14px,3.9vw,16px);font-weight:700;line-height:1.2;color:var(--muted);white-space:nowrap;min-width:0;border-radius:14px}
nav.bottom a svg{width:56px;height:32px;padding:4px 16px;border-radius:16px;flex:none;transition:background-color .15s}
nav.bottom a.on{color:#C4442C}
nav.bottom a.on svg{background:#FCE3DB}
nav.bottom a:active svg{background:var(--soft)}
nav.bottom .pdot{top:6px;left:calc(50% + 14px)}
nav.bottom .cnt{position:absolute;top:2px;left:calc(50% + 8px);min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#C4442C;color:#fff;font:800 13px/22px var(--font);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--surface)}

/* ---------- «Что покупаем?» над панелью (только каталог: body.has-mq; base.html) ---------- */
body.has-mq .mq{display:block}  /* на десктопе .mq{display:none} — в <style> base.html */
.mq{position:fixed;left:0;right:0;bottom:calc(var(--m-tab) + var(--m-sab));z-index:21;height:var(--m-dock);
 padding:20px calc(16px + var(--m-sar)) 0 calc(16px + var(--m-sal));text-decoration:none;color:var(--text);
 background:var(--stitch) repeat-x left top/24px 12px,linear-gradient(var(--bg),var(--bg)) 0 0/100% 12px no-repeat,var(--surface);
 box-shadow:0 -6px 20px rgba(70,40,20,.06);transition:transform .2s,opacity .2s}
.mq-f{display:flex;align-items:center;gap:10px;height:56px;padding:0 18px;border:2.5px solid #C4442C;border-radius:28px;background:#fff;font-weight:700;font-size:18px;color:#7A6A5E}
.mq-f svg{width:24px;height:24px;flex:none;color:#C4442C;stroke-width:2.6}
.mq-f span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq:active .mq-f,.mq:focus-visible .mq-f{box-shadow:0 0 0 3px var(--honey)}
.mq:focus-visible{outline:none}
/* панель под строкой поиска — без своей каймы (кайма у общего «дока») */
body.has-mq:not(.mq-hide) nav.bottom{padding-top:6px;background:var(--surface);box-shadow:none;border-top:1px solid var(--line)}
body.has-mq:not(.mq-hide) nav.bottom a{min-height:69px}
body.mq-hide .mq{transform:translateY(24px);opacity:0;pointer-events:none;visibility:hidden}

/* ---------- тост над панелью ---------- */
.toast{bottom:calc(var(--m-bottom) + 12px);min-height:52px;font-size:16px;max-width:calc(100% - 32px - var(--m-sal) - var(--m-sar))}
.toast a{min-height:48px}

/* ---------- подвал: компактно, ссылки в две колонки (текстовые « · » гасим font-size:0) ---------- */
.site-foot{margin:28px 0 0;font-size:0;display:flex;flex-wrap:wrap;align-items:center;text-align:left}
.site-foot .stitch,.site-foot .fmark{flex:0 0 100%}
.site-foot .stitch{margin:0 0 10px}
.site-foot .fmark{flex:none;width:100%;height:28px;margin:0 0 2px}
.site-foot a{flex:0 0 50%;display:flex;align-items:center;min-height:48px;padding:0 4px;font-size:16px;text-decoration:none}
/* язык — здесь (в шапке телефона его нет): отдельной строкой, крупные зоны */
.site-foot .lang-sw{flex:none;margin:8px 0 0;padding:4px}
.site-foot .lang-sw b,.site-foot .lang-sw a{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:64px;height:44px;min-height:44px;padding:0 14px;font-size:16px}
.site-foot>span:last-child{flex:1 1 auto;text-align:right;font-size:16px;padding:8px 4px 0}

/* ---------- home (home.html): первый экран = компактная шапка-промо + лента скидок ---------- */
/* порядок секций на телефоне: промо → лучшие скидки → техника → «чаще покупают» → категории → skidki+ */
.home-m{display:flex;flex-direction:column}
.home-m>.hero-e{order:0}.home-m>.h-best{order:1}.home-m>.h-tech{order:2}.home-m>.h-pop{order:3}
.home-m>.h-cats{order:4}.home-m>.h-tcats{order:5}.home-m>.h-plus{order:6}
.home-m>.h-best,.home-m>.h-cats{margin-top:0!important}
/* заголовок секции и кнопка «Все скидки →» — в одну строку (заголовок переносится сам) */
.home-m>.sect>.hd{flex-wrap:nowrap;align-items:center}
.home-m>.sect>.hd h2{flex:1 1 auto;min-width:0;margin:0;font-size:20px;line-height:1.25}
.home-m>.sect>.hd .btn{flex:none;padding:0 14px}
/* категории: не простыня на 2000px, а лента в два ряда с прокруткой вбок (как «Чаще всего покупают»); счётчики — на странице категории */
.home-m .cats{display:grid;grid-template-columns:none;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:168px;gap:10px;
 overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
.home-m .cats::-webkit-scrollbar{display:none}
.home-m .cat{grid-template-columns:1fr;align-content:start;gap:6px;padding:8px 8px 10px;text-align:center;scroll-snap-align:start}
.home-m .cat .ci{width:100%;height:72px}
.home-m .cat .ct{font-size:16px;line-height:1.2}
.home-m .cat .cs{display:none}
.home-m .cat .cd{justify-self:center;white-space:nowrap;font-size:16px;margin-top:2px;padding:2px 8px}
/* «Чаще всего покупают» и быстрые ссылки skidki+ — подписи не мельче 16px */
.home-m .gtile .s{font-size:16px}
.home-m .gtile .s .was{font-size:16px}
.plus-quick a{min-height:64px}
.plus-quick small{font-size:16px}
/* промо: слоган, поле поиска, «Скидки дня», строка доверия; абзац, вторая кнопка, цифры и иллюстрация — только на десктопе */
.hero-e{display:block;margin:0 0 18px;padding:24px 16px 16px;border-radius:24px}
.hero-e .hero-art,.hero-e .sub,.hero-e .proof,.hero-e .cta .btn:not(.primary){display:none}
.hero-txt{display:flex;flex-direction:column}
.hero-e h1{order:1;font-size:27px;line-height:1.12;margin:0 0 12px}
.hero-e .search{order:2;margin:0 0 10px}
.hero-e .search input{min-height:52px;font-size:16px;padding-right:12px}
.hero-e .search button{display:none}   /* отправка — клавишей «Поиск» клавиатуры; так подсказка в поле не обрезается */
.hero-e .cta{order:3}
.hero-e .cta .btn.primary{flex:1 1 100%;min-height:48px;padding:10px 16px;font-size:17px}
.hero-e .eyebrow{order:4;margin:10px 0 0;font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.35;color:var(--muted)}
.hero-e .eyebrow .lead-link{color:var(--primary-ink)}
}
/* низкий экран (клавиатура / альбомная ориентация): панели нет — и строки поиска нет */
@media (max-height:500px) and (max-width:900px){
 body.has-mq .mq{display:none}
 body{padding-bottom:24px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.mq,nav.bottom a svg{transition:none}}