/* durchdacht new-web — адаптивный слой (телефон и планшет).
   ────────────────────────────────────────────────────────────────────────────
   Файл ОТДЕЛЬНЫЙ и грузится ПОСЛЕДНИМ (layout.php после всех остальных CSS),
   поэтому переопределяет их без гонки !important и не конфликтует с правками,
   которые идут в inner.css / product.css / cards.css параллельно.

   Опорные ширины:
     ≤1100px  планшет-ландшафт: многоколоночные сетки ужимаются
     ≤900px   МОБИЛЬНЫЙ СЛОЙ: шапка = логотип + меню + поиск,
              «Účet / Oblíbené / Košík» уезжают в нижнюю липкую панель,
              фильтры каталога прячутся в выдвижную шторку
     ≤560px   узкий телефон: типографика и отступы ещё компактнее

   Разметка макета (.dd-*) держит стили в инлайне, поэтому её приходится
   перебивать через !important — это не лень, а единственный способ.
   <!-- TODO: native review --> */

/* Две РАЗНЫЕ величины, их нельзя путать:
     --nw-tab-h  постоянная высота ряда вкладок (константа вёрстки);
     --nw-tb-h   ПОЛНАЯ высота панели вместе с полосой корзины, её измеряет
                 mobile.js. От неё считаются отступ body, кнопка WhatsApp, тост
                 и липкий прайсбокс.
   Если высоту вкладок задать через --nw-tb-h, получится петля: JS пишет в
   переменную общую высоту → вкладки становятся выше → общая высота растёт. */
:root { --nw-tab-h: 58px; --nw-tb-h: 58px; }

/* ══════════════════════════════════════════════════════════════════════════
   0. Общие предохранители от вылета за экран
   ══════════════════════════════════════════════════════════════════════════ */
img, video, canvas, svg:not([width]) { max-width: 100%; }

/* Длинные слова (немецко-чешские составные, e-mail, URL) не должны распирать
   колонку — раньше из-за них карточки вылезали за край на 320px. */
h1, h2, h3, .nwc-t, .nw-pp-titlebox h1, .nwcat-h1 { overflow-wrap: anywhere; }

/* Таблицы контента произвольной ширины (статьи, юридические страницы,
   админка) на узком экране прокручиваются сами, а не рвут страницу. */
@media (max-width: 900px) {
  .nw-prose table, .nw-adm-table, .nw-adm-items {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .nw-prose table { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1. Шапка ≤900px: логотип + поиск, категории отдельной липкой строкой
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── верхняя тёмная полоса: оставляем одно обещание и телефон ─────────── */
  .dd-page > .dd-promo {
    height: auto !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    gap: 10px !important;
  }
  /* Обещания переносятся на вторую строку, а не прячутся: клиент попросил
     видеть на телефоне тот же набор, что и на десктопе (см. п.17 ниже). */
  .dd-page > .dd-promo .dd-promo-c { gap: 4px 12px !important; min-width: 0; }
  .dd-page > .dd-promo .dd-promo-x { display: flex !important; flex: none; gap: 12px !important; }
  .dd-page > .dd-promo .dd-promo-mail { display: none !important; }   /* почта есть в футере и в меню */

  /* ── строка логотипа и поиска ─────────────────────────────────────────── */
  .dd-page > .dd-head {
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    padding: 10px 14px !important;
    align-items: center !important;
  }
  .dd-page > .dd-head > .nw-logo-link { order: 1; flex: none; }
  .dd-page > .dd-head > .nw-logo-link svg { width: 148px !important; height: auto !important; }
  .dd-page > .dd-head > .nw-logo-link div[style*="letter-spacing"] { font-size: 9px !important; }

  /* Поиск — отдельной строкой во всю ширину. Раньше он оставался в одной
     строке с логотипом и обрезался (на 320px терялось 227px кнопки). */
  .dd-page > .dd-head > .nwh-search {
    order: 3;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 44px !important;
    min-width: 0;
  }
  .dd-page > .dd-head > .nwh-search form { min-width: 0; }
  /* flex:none обязателен — иначе селект сжимается флексом до одной каретки
     и «Vše» не видно */
  .dd-page > .dd-head > .nwh-search .nw-cat-sel {
    flex: none !important; width: auto !important; max-width: 104px !important;
    font-size: 12px !important; padding: 0 6px 0 10px !important;
  }
  .dd-page > .dd-head > .nwh-search input { min-width: 0 !important; padding: 0 10px !important; font-size: 14px !important; }
  /* Только кнопка отправки: без [type=submit] правило ловило и кнопку выпадашки
     категорий (.nw-dd-btn, её строит cart.js вместо <select>) — та ужималась
     до 46px и подпись «Vše» схлопывалась в ноль. */
  .dd-page > .dd-head > .nwh-search button[type="submit"] { width: 46px !important; flex: none !important; }

  /* ── липкая строка категорий: только кнопка меню ──────────────────────── */
  .dd-page > .dd-nav {
    height: auto !important;
    padding: 8px 14px !important;
    gap: 8px !important;
  }
  .dd-page > .dd-nav > .nwnav-l { display: none !important; }
  /* Аккаунт, избранное и корзина живут в нижней панели — в шапке они только
     воровали место и обрезались краем .dd-page (overflow-x:clip). */
  .dd-page > .dd-nav > .nwh-acts { display: none !important; }
  .nwmega-btn {
    margin-right: 0 !important;
    width: 100%;
    justify-content: center;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    white-space: nowrap;
  }
  .nwmega-btn .nwmega-car { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. Нижняя липкая панель (templates/_tabbar.php)
   ══════════════════════════════════════════════════════════════════════════ */
.nw-tbwrap { display: none; }

@media (max-width: 900px) {
  .nw-tbwrap {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    /* панель обязана переживать экранную клавиатуру и «чёлку» */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid #E4E7EC;
    box-shadow: 0 -8px 26px rgba(16, 24, 40, .1);
    font-family: Inter, system-ui, sans-serif;
  }

  /* полоса корзины: появляется, как только в корзине что-то есть */
  .nw-tbcart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: #101828;
    color: #fff;
  }
  .nw-tbcart.is-off { display: none; }
  .nw-tbcart-l { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .nw-tbcart-n { font: 500 11px Inter, sans-serif; color: rgba(255, 255, 255, .62); }
  .nw-tbcart-s { font: 800 15px Inter, sans-serif; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
  .nw-tbcart-go {
    flex: none;
    display: inline-flex; align-items: center; gap: 7px;
    background: #A9633A; color: #fff;
    border-radius: 9px; padding: 10px 15px;
    font: 700 13px Inter, sans-serif; text-decoration: none;
  }
  .nw-tbcart-go:hover { background: #8A4E28; color: #fff; text-decoration: none; }

  /* сами вкладки */
  .nw-tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: var(--nw-tab-h);
  }
  .nw-tb-i {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: #667085; text-decoration: none;
    font: 600 10.5px Inter, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .nw-tb-i:hover, .nw-tb-i:active { color: #A9633A; text-decoration: none; }
  .nw-tb-i.is-on { color: #A9633A; }
  .nw-tb-ico { position: relative; display: flex; }
  .nw-tb-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .nw-tb-badge {
    position: absolute; top: -6px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 99px; background: #D92D20; color: #fff;
    font: 700 9.5px/16px Inter, sans-serif; text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  .nw-tb-badge.is-off { display: none; }
  /* cart.js вешает свой бейдж .nw-favcount на КАЖДУЮ ссылку /oblibene/, включая
     нашу вкладку — из-за этого счётчик избранного показывался дважды.
     Свой бейдж (data-nw-tbfav) оставляем, чужой гасим. */
  .nw-tabbar .nw-favcount { display: none !important; }

  /* Место под нижнюю панель отдаёт САМ ФУТЕР, а не body: отступ у body рисовался
     светлым фоном страницы и читался как пустая полоса между тёмным футером и
     концом страницы. Теперь футер просто продолжается под панелью. */
  body { padding-bottom: 0; }
  body .dd-page > .dd-full:last-of-type {
    padding-bottom: calc(var(--nw-tb-h) + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
  }
  /* подстраховка: если футера на странице почему-то нет, фон под панелью
     всё равно не будет выглядеть дырой */
  body { background: #101828; }
  /* Кнопка WhatsApp поднимается над панелью (её высоту пересчитывает mobile.js:
     с непустой корзиной сверху добавляется полоса с суммой).
     🔴 Префикс body обязателен: мобильный слой макета лежит инлайновым <style>
     ВНУТРИ body, то есть позже нашего <link> в <head>, и при равной
     специфичности выигрывал он — кнопка оставалась на bottom:82px и ныряла
     под полосу с ценой. */
  body .dd-page > a[href*="wa.me"] {
    bottom: calc(var(--nw-tb-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 50px !important; height: 50px !important;
  }
  body .dd-page > a[href*="wa.me"] svg { width: 25px !important; height: 25px !important; }
}

/* нижняя карточка «добавлено в корзину» вместо дропдауна шапки (mobile.js) */
.nw-tbsheet {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(var(--nw-tb-h) + 10px + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  background: #fff;
  border: 1px solid #E4E7EC;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
  padding: 12px;
  font-family: Inter, system-ui, sans-serif;
  display: none;
}
.nw-tbsheet.is-on { display: block; }
.nw-tbsheet-ok {
  display: flex; align-items: center; gap: 7px;
  background: #E7F6EF; color: #12805C; border-radius: 9px;
  padding: 9px 11px; font: 700 12.5px Inter, sans-serif; margin-bottom: 9px;
}
.nw-tbsheet-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nw-tbsheet-line img { width: 52px; height: 40px; object-fit: cover; border-radius: 7px; flex: none; background: #F4F6F8; }
.nw-tbsheet-t { flex: 1; min-width: 0; font: 600 12.5px/1.35 Inter, sans-serif; color: #101828;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nw-tbsheet-p { font: 700 12.5px Inter, sans-serif; color: #101828; white-space: nowrap; }
.nw-tbsheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nw-tbsheet-btns a {
  display: block; text-align: center; border-radius: 9px; padding: 11px 8px;
  font: 700 13px Inter, sans-serif; text-decoration: none;
}
.nw-tbsheet-btns a:first-child { border: 1.5px solid #E4E7EC; color: #101828; }
.nw-tbsheet-btns a:last-child { background: #A9633A; color: #fff; }
.nw-tbsheet-x {
  position: absolute; top: -10px; right: -4px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #E4E7EC; background: #fff; color: #667085;
  font: 700 15px/1 Inter, sans-serif; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   2b. Мобильное меню: мега-панель превращается в полноэкранную шторку
   ══════════════════════════════════════════════════════════════════════════ */
.nwmega-mhead { display: none; }

@media (max-width: 900px) {
  /* Панель больше не «выпадает» из строки навигации, а занимает весь экран:
     раньше это была выпадашка на 76vh, которая ездила вместе со страницей и
     половину списка было не достать.
     🔴 Селектор по id обязателен: у панели есть класс dd-bleed, а инлайновый
     стиль макета держит `.dd-page .dd-bleed { max-height:76vh !important }` —
     обычное `.nwmega { max-height:none !important }` ему проигрывало по
     специфичности, и шторка обрывалась на 593px, сливаясь со страницей. */
  #nw-mega.nwmega {
    display: block;
    position: fixed !important;
    top: 0 !important; left: 0; right: 0; bottom: 0;
    z-index: 95;
    width: 100%;
    height: 100%;
    max-height: 100% !important;
    background: #FBFBF9;
    border: 0;
    box-shadow: none;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s ease;
  }
  #nw-mega.nwmega.is-open { transform: translateX(0); visibility: visible; }
  /* нижний отступ, чтобы последняя карточка не пряталась под «чёлкой» */
  #nw-mega .nwmega-inner { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important; }

  .nwmega-mhead {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 3;
    padding: 11px 14px;
    background: #101828; color: #fff;
  }
  .nwmega-mhead-t { display: flex; align-items: center; min-width: 0; }
  .nwmega-mhead-t svg { display: block; width: 142px; height: auto; }
  .nwmega-mclose {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent; color: #fff;
    font-size: 15px; cursor: pointer;
  }

  .nwmega-inner { padding: 14px 14px 28px !important; gap: 16px !important; }
  .nwmega-h { margin-bottom: 10px; }

  /* Категории — компактные строки вместо больших карточек с картинками:
     шесть карточек 21/9 давали экран длиной в три прокрутки. */
  .nwmega-grid { gap: 8px !important; }
  .nwmega-card { flex-direction: row; align-items: stretch; border-radius: 11px; }
  .nwmega-card-img { aspect-ratio: auto !important; flex: none; width: 92px; }
  .nwmega-card-b { padding: 10px 12px; justify-content: center; }
  .nwmega-card-h { margin-bottom: 7px; flex-wrap: wrap; gap: 2px 8px; }
  .nwmega-card-t { font-size: 13.5px; }
  .nwmega-card-links { grid-template-columns: 1fr 1fr; gap: 6px; }
  .nwmega-card-links a { padding: 7px 5px; font-size: 10.5px; }

  .nwmega-side { gap: 10px; padding-top: 14px; }
  .nwmega-kfg { padding: 15px 16px; }
  .nwmega-kfg-t { font-size: 14px; margin-bottom: 5px; }
  .nwmega-kfg-d { margin-bottom: 9px; }
  .nwmega-sale { padding: 14px 16px; }
  .nwmega-info a { padding: 12px 14px; font-size: 13px; }
  .nwmega-show { padding: 13px 14px; }

  /* пока меню открыто, страница под ним не прокручивается (класс ставит mobile.js) */
  html.nw-nomega, html.nw-nomega body { overflow: hidden; }

  /* 🔴 Строка .dd-nav липкая и имеет z-index, то есть создаёт СВОЙ контекст
     наложения — z-index:95 у меню считается внутри него, и снаружи вся строка
     лежит на уровне 45, ниже нижней панели (80). Поэтому панель и кнопку
     WhatsApp на время открытого меню просто убираем: под шторкой они не нужны. */
  html.nw-nomega .nw-tbwrap,
  html.nw-nomega .dd-page > a[href*="wa.me"],
  html.nw-noscroll .nw-tbwrap,
  html.nw-noscroll .dd-page > a[href*="wa.me"] { display: none !important; }
}

@media (max-width: 400px) {
  .nwmega-card-img { width: 76px; }
  .nwmega-card-links { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. Каталог: фильтры в выдвижной шторке
   ══════════════════════════════════════════════════════════════════════════ */
.nwcat-filtbtn, .nwcat-fbackdrop, .nwcat-side-head { display: none; }

@media (max-width: 1000px) {
  /* кнопка над сеткой товаров */
  .nwcat-filtbtn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid #E4E7EC; background: #fff; color: #101828;
    border-radius: 10px; padding: 10px 16px;
    font: 700 13.5px Inter, sans-serif; cursor: pointer;
    margin-bottom: 14px;
  }
  .nwcat-filtbtn:hover { border-color: #A9633A; color: #A9633A; }
  .nwcat-filtbtn-n {
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
    background: #A9633A; color: #fff; font: 700 11px/19px Inter, sans-serif; text-align: center;
  }

  /* сам сайдбар — панель, выезжающая слева */
  .nwcat-body > .nwcat-side {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    z-index: 90;
    width: min(86vw, 340px);
    max-width: 100%;
    margin: 0;
    padding: 0 16px 24px;
    background: #fff;
    box-shadow: 0 0 60px rgba(16, 24, 40, .3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-101%);
    transition: transform .24s ease;
    visibility: hidden;
  }
  .nwcat-body.is-filters > .nwcat-side { transform: translateX(0); visibility: visible; }

  .nwcat-side-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -16px 12px; padding: 14px 16px;
    background: #fff; border-bottom: 1px solid #E4E7EC;
    font: 800 15px Inter, sans-serif; color: #101828;
  }
  .nwcat-fclose {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid #E4E7EC; background: #fff; color: #667085;
    font-size: 14px; cursor: pointer;
  }

  .nwcat-fbackdrop {
    position: fixed; inset: 0; z-index: 89;
    border: 0; padding: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .nwcat-body.is-filters > .nwcat-fbackdrop { display: block; opacity: 1; visibility: visible; }

  /* пока шторка открыта, страница под ней не прокручивается */
  html.nw-noscroll, html.nw-noscroll body { overflow: hidden; }
}

@media (max-width: 640px) {
  .nwcat-topbar { gap: 10px; }
  .nwcat-sort { flex-wrap: wrap; gap: 8px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Главная и общие секции
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Виджет конфигуратора на главной: тёмная карта в одну колонку.
     Прайсбокс делаем НЕ липким — иначе он дерётся с нижней панелью. */
  .nwhk .nwhk-viz { min-height: 220px; }
  .nwhk-head-t { font-size: 18px; }
  .nwhk-panel .nw-kfgx-pricebox { position: static !important; }
}
/* Полоса доверия под героем («Záruka 10 let», «Showroom Karlovy Vary» и т.п.):
   это грид из макета, у его ячеек min-width:auto, поэтому длинные слова
   не давали колонкам сжиматься и полоса вылезала за экран на 320px. */
@media (max-width: 560px) {
  .nw-main--home > div[style*="repeat(4, 1fr)"] { gap: 8px !important; }
  .nw-main--home > div[style*="repeat(4, 1fr)"] > *,
  .nw-main--home > div[style*="repeat(4, 1fr)"] > * > div { min-width: 0; }
}
@media (max-width: 360px) {
  .nw-main--home > div[style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .nwhq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nwhq { padding: 13px 12px 12px; }
  .nwhq-ico { width: 32px; height: 32px; margin-bottom: 6px; }
  .nwhq-t { font-size: 12.5px; }
  .nwhq-s { font-size: 11px; }
  .nwhk-tabs { gap: 6px; }
  .nwhk-tab { padding: 8px 11px; font-size: 11.5px; }
}

/* Сравнительная таблица главной: даём ей честную прокрутку и на планшете. */
@media (max-width: 1000px) {
  .dd-page .dd-cmp { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .dd-page .dd-cmp > div { min-width: 640px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. Страница товара и конфигуратор
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* Липкий прайсбокс конфигуратора налезал бы на нижнюю панель. */
  .nw-kfgx-pricebox { bottom: calc(var(--nw-tb-h) + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 900px) {
  .nw-pp-titlebox h1 { font-size: 25px; line-height: 1.22; }
  .nw-pp-trust { flex-wrap: wrap; gap: 6px 12px; }
  /* Таблица характеристик: подпись слева, значение справа — на узком экране
     значение прижималось к краю и рвало строку. */
  .nw-pp-spectable th, .nw-pp-spectable td { font-size: 13.5px; padding: 11px 0; }
  .nw-pp-spectable th { padding-right: 12px; }
}
@media (max-width: 560px) {
  .nw-pp-titlebox h1 { font-size: 22px; }
  /* «Vyrábíme na míru · termín potvrdíme v nabídce» — 334px в строке без переносов,
     на 320px это вылезало за экран */
  .nw-pp-trust-i { white-space: normal; }
  /* табы шагов «Krok 1 / 2 / 3» на 320px не помещались в одну строку */
  .nw-kfgx-ktab { padding: 9px 4px 8px; font-size: 11px; }
  .nw-kfgx-ktab span { font-size: 9px; letter-spacing: .06em; }
  .nw-kfgx-steps { padding: 14px 12px; }
  .nw-kfgx-btn { padding: 9px 10px; font-size: 12.5px; min-width: 46px; }
  .nw-kfgx-group[data-type="size"] .nw-kfgx-row { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); }
  .nw-kfgx-cur { max-width: 52%; font-size: 11.5px; }
  .nw-kfgx-wiznav { gap: 8px; }
  .nw-kfgx-wizback, .nw-kfgx-wiznext { flex: 1; padding-left: 12px; padding-right: 12px; }
  .nw-kfgx-sidename { white-space: normal; }
}

/* Кнопка «Uložit» стоит в строке заголовка и на самом узком экране не помещалась
   в последнюю строку H1 — переводим её на отдельную строку (display:flex делает
   элемент блочным, поэтому перенос гарантирован). */
@media (max-width: 380px) {
  .nw-pp-titlebox h1 .nw-pp-fav { display: flex; margin: 10px 0 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. Корзина, чекаут, кабинет
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Итоговая карточка корзины/чекаута липла к низу и пряталась под панелью. */
  .nw-cart-sum, .nw-co-sum, .nwcart-sum { position: static !important; }
}
@media (max-width: 560px) {
  .nw-co-two { grid-template-columns: 1fr; }
  .nw-form input, .nw-form select, .nw-form textarea { font-size: 16px; }  /* iOS не зумит поле при фокусе */
  .nw-co-field input, .nw-co-field select { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6b. Страница поиска
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* У поля стоит flex:1, но min-width:auto равен внутренней ширине input (~247px),
     поэтому поле не сжималось и кнопка «Hledat» уезжала за край экрана. */
  .nw-search-form input { min-width: 0; }
}
@media (max-width: 380px) {
  .nw-search-form { flex-wrap: wrap; }
  .nw-search-form input, .nw-search-form .nw-cta { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. Плавающие слои: не шире экрана
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nw-kfgx-tip { max-width: calc(100vw - 20px) !important; }
  .nw-modal-win { max-width: calc(100vw - 24px); }
  .nw-dd-list, .nw-suggest { max-width: calc(100vw - 20px); }
  /* тост и мини-корзина не должны наезжать на нижнюю панель */
  .nw-toast { bottom: calc(var(--nw-tb-h) + 14px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. Обход клиента по мобильной версии (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   ВАЖНО про специфичность: мобильный слой макета лежит инлайновым <style>
   ВНУТРИ body, то есть позже нашего <link>. Поэтому там, где мы спорим с ним,
   селектор начинается с `body` — иначе при равном !important выигрывает он.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* --- 17. Верхняя полоса: показываем ВСЕ обещания, а не одно ------------ */
  body .dd-page > .dd-promo { flex-wrap: wrap !important; row-gap: 4px !important; }
  body .dd-page > .dd-promo .dd-promo-c {
    flex-wrap: wrap !important; overflow: visible !important; gap: 4px 12px !important;
  }
  body .dd-page > .dd-promo .dd-promo-c > * { display: flex !important; }
  body .dd-page > .dd-promo .dd-promo-c > span[style*="opacity"] { opacity: .3; }

  /* --- 3. Логотип по центру и крупнее ------------------------------------ */
  body .dd-page > .dd-head > .nw-logo-link { flex: 1 0 100% !important; display: flex; justify-content: center; }
  body .dd-page > .dd-head > .nw-logo-link > div { align-items: center !important; }
  body .dd-page > .dd-head > .nw-logo-link svg { width: 200px !important; height: auto !important; }
  body .dd-page > .dd-head > .nw-logo-link div[style*="letter-spacing"] { font-size: 10px !important; }

  /* --- 2. Секции главной по одной сетке: лишние боковые отступы убираем --- */
  body .dd-page .nw-main--home > div { padding-left: 0 !important; padding-right: 0 !important; }

  /* --- 1. Заголовок героя: 44px макета не помещались в три строки --------- */
  body .dd-page .nw-main--home h1 { font-size: 23px !important; line-height: 1.22 !important; }

  /* --- 16. Полоса преимуществ: иконка сверху, текст под ней --------------- */
  body .dd-page .nw-main--home > div[style*="repeat(4, 1fr)"] > div {
    flex-direction: column !important; align-items: flex-start !important; gap: 9px !important;
    padding: 14px 14px 15px !important;
  }

  /* --- 10. Статистика (1992 / 10 let / 150 kg / 4–6 týdnů) сеткой 2×2 ----- */
  body .dd-page .nw-main--home div[style*="1fr 1fr; gap: 12px"] { grid-template-columns: 1fr 1fr !important; }
  body .dd-page .nw-main--home div[style*="1fr 1fr; gap: 12px"] > div { padding: 14px !important; min-width: 0; }
  body .dd-page .nw-main--home div[style*="1fr 1fr; gap: 12px"] > div > div:first-child { font-size: 19px !important; }

  /* --- 6. «Všechny konstrukce a příslušenství» от левого края ------------- */
  body .nwhk-foot { justify-content: flex-start !important; }

  /* --- 5. Таблица сравнения: компактнее + первый столбец не уезжает ------- */
  body .nwcmp-table { min-width: 540px; }
  body .nwcmp-table thead th { padding: 11px 12px; font-size: 12px; }
  body .nwcmp-table tbody th { padding: 11px 12px; width: 118px; font-size: 12px; }
  body .nwcmp-table tbody td { padding: 11px 12px; font-size: 12px; }
  body .nwcmp-table thead th:first-child,
  body .nwcmp-table tbody th {
    position: sticky; left: 0; z-index: 2;
    background: #fff; box-shadow: 1px 0 0 #E4E7EC;
  }
  body .nwcmp-table thead th:first-child { background: #F4F6F8; z-index: 3; }
  body .nwcmp-table .nwcmp-lastrow th { background: #FAFBFC; }
  body .nwcmp-price { font-size: 13px; }

  /* --- 9. Галерея реализаций: ровная сетка, последняя плитка на всю ширину */
  body .dd-page .nwgal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 164px !important;
    gap: 8px !important;
  }
  body .dd-page .nwgal-tile {
    grid-column: span 1 !important;
    height: auto !important; min-height: 0 !important;
  }
  body .dd-page .nwgal-tile:last-child { grid-column: span 2 !important; }
  body .dd-page .nwgal-cap { left: 12px; right: 12px; bottom: 11px; }
  body .dd-page .nwgal-cap-t { font-size: 13.5px; }
  body .dd-page .nwgal-cap-m { font-size: 11px; }

  /* --- 11. Карта: 440px высоты на телефоне съедали целый экран ------------ */
  body #sec-mapa div[style*="min-height: 440px"] { min-height: 230px !important; }

  /* --- 12. Отзывы: две кнопки в ряд -------------------------------------- */
  body .nwrev-btns { flex-direction: row !important; max-width: none !important; }
  body .nwrev-btns > * { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; }

  /* --- 13. «Potřebujete poradit?»: телефон и WhatsApp в ряд ---------------
     Кнопки ОБЯЗАНЫ уметь сжиматься: без min-width:0 их min-content (длинный
     номер телефона) задирал минимальную ширину всей карточки, и на 320-360px
     карточка вылезала за экран вместе с заголовком, списком плюсов и FAQ. */
  body .nw-pp-poradit-btns { flex-direction: row !important; flex-wrap: wrap; min-width: 0; }
  body .nw-pp-callbtn, body .nw-pp-wabtn {
    flex: 1 1 130px; min-width: 0; white-space: normal; padding-left: 10px; padding-right: 10px;
  }
  body .nwcat-poradit, body .nwcat-poradit-l, body .nw-pp-poradit { min-width: 0; }

  /* --- 19. Кейсы на карточке товара — каруселью, как полки на главной ----- */
  body .nw-pp-real-grid {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; gap: 12px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  body .nw-pp-real-grid::-webkit-scrollbar { display: none; height: 0; }
  body .nw-pp-real-grid > * { flex: 0 0 78%; scroll-snap-align: start; }

  /* --- 15. iOS не должен зумить страницу при фокусе в поле ---------------- */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  body select,
  body textarea { font-size: 16px !important; }
}

/* --- 4. Мобильное меню без фотографий: одни названия -------------------- */
@media (max-width: 900px) {
  #nw-mega .nwmega-card-img { display: none !important; }
  #nw-mega .nwmega-card { flex-direction: column; }
  #nw-mega .nwmega-card-b { padding: 12px 14px 13px; }
  #nw-mega .nwmega-card-h { margin-bottom: 9px; }
  #nw-mega .nwmega-card-t { font-size: 14px; }
  #nw-mega .nwmega-grid { gap: 7px !important; }
}

/* --- 18. Шаги заказа 1-2-3: на телефоне не помещались в строку ---------- */
@media (max-width: 640px) {
  .shopx-steps { gap: 0; margin-bottom: 18px; }
  .shopx-steps li { gap: 6px; }
  .shopx-steps li:not(:last-child)::after { width: 12px; margin: 0 7px; }
  .shopx-step-n { width: 22px; height: 22px; font-size: 11px; }
  .shopx-step-t { font-size: 11.5px; }
}
@media (max-width: 380px) {
  /* совсем узкий экран: подписи прячем, остаются кружки с номерами */
  .shopx-step-t { display: none; }
  .shopx-steps li.is-cur .shopx-step-t { display: inline; }
}

/* --- 7. Пары кнопок — в ряд по две (конфигуратор) ----------------------- */
@media (max-width: 560px) {
  .nw-kfgx-sw { flex: 1 1 calc(50% - 3px) !important; min-width: 0; padding: 9px 10px; gap: 8px; }
  .nw-kfgx-sw .nw-kfgx-swl { min-width: 0; font-size: 12px; }
  .nw-kfgx-sw .nw-kfgx-swl small { font-size: 10px; }
  .nw-kfgx-chip { width: 20px; height: 20px; }
  /* .nw-kfgx-actions в ряд НЕ ставим: в блоке покупки простого товара там
     лежат «Přidat do košíku» и «Nezávazná poptávka», и в одной строке вторая
     кнопка уезжала за экран на 313px. Просьба клиента про «две кнопки в ряд»
     относилась к выбору цвета — это .nw-kfgx-sw выше. */
  .nw-kfgx-actions { gap: 8px; }
}

/* На самом узком экране номер телефона и WhatsApp в одну строку не помещаются
   при всём желании — там возвращаем столбик. */
@media (max-width: 380px) {
  body .nw-pp-poradit-btns { flex-direction: column !important; }
}

/* --- 8. Пока висит карточка «Přidáno do košíku», кнопку WhatsApp прячем:
       иначе она наезжает на карточку и на полосу с ценой ------------------ */
@media (max-width: 900px) {
  html.nw-sheet body .dd-page > a[href*="wa.me"] { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. Второй обход клиента (2026-08-14)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* --- Верхняя полоса на телефоне не показывается вовсе -------------------
     Решение клиента: сначала убрали обещания, затем и телефон. Контакты никуда
     не делись — они внизу мобильного меню, в футере и в форме «Potřebujete
     poradit?». Страница начинается сразу с логотипа и поиска. */
  body .dd-page > .dd-promo { display: none !important; }

  /* --- Меню: только названия категорий, без «Volně stojící / Montáž» ------ */
  #nw-mega .nwmega-card-links { display: none !important; }
  #nw-mega .nwmega-card-h { margin-bottom: 0; }
  #nw-mega .nwmega-card-b { padding: 13px 14px; }

  /* --- Меню: контакты внизу шторки --------------------------------------- */
  .nwmega-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .nwmega-cn {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #E4E7EC; border-radius: 12px;
    padding: 12px 14px; text-decoration: none;
  }
  .nwmega-cn:hover { border-color: #A9633A; text-decoration: none; }
  .nwmega-cn-i {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    background: #F5EBE0; color: #A9633A;
    display: flex; align-items: center; justify-content: center;
  }
  .nwmega-cn--wa .nwmega-cn-i { background: #E8F9EE; }
  .nwmega-cn--wa .nwmega-cn-i .nw-wa-ico { color: #25D366; }
  .nwmega-cn-t { min-width: 0; }
  .nwmega-cn-t b { display: block; font: 700 14px Inter, sans-serif; color: #101828;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nwmega-cn-t small { display: block; font: 500 11.5px Inter, sans-serif; color: #667085; margin-top: 1px; }

  /* --- Форма «Potřebujete poradit?»: номер целиком, WhatsApp одной иконкой -
     Полное название кнопки вместе с номером телефона в одну строку не влезало,
     и номер переносился на две строки. */
  body .nw-pp-poradit-btns { flex-wrap: nowrap; }
  /* Селектор через .nw-pp-poradit-btns обязателен: cards.css держит
     `.nwcat-poradit .nw-pp-wabtn { flex: 1 1 0 }` (0,2,0), и правило по одному
     классу ему проигрывало — кнопка WhatsApp оставалась шире номера телефона. */
  body .nw-pp-poradit-btns .nw-pp-callbtn { flex: 1 1 auto; white-space: nowrap; }
  body .nw-pp-poradit-btns .nw-pp-wabtn {
    flex: 0 0 auto; width: auto; padding-left: 15px; padding-right: 15px; gap: 0;
  }
  body .nw-pp-wabtn-t { display: none; }
}

/* столбик на узком экране больше не нужен: WhatsApp теперь занимает одну иконку */
@media (max-width: 380px) {
  body .nw-pp-poradit-btns { flex-direction: row !important; }
  body .nw-pp-callbtn { font-size: 13px; padding-left: 10px; padding-right: 10px; }
}

/* контакты меню на десктопе не нужны — там они в верхней полосе и в футере */
@media (min-width: 901px) {
  .nwmega-contact { display: none; }
}

/* --- Конфигуратор товара: панель по высоте своего содержимого -------------
   Тёмный ценовой блок был sticky и на телефоне лежал ПОВЕРХ последних шагов —
   строка «HLOUBKA» и часть опций уезжали под кнопки «Přidat do košíku».
   На узком экране он просто встаёт в конец панели: ничего не перекрывает,
   и высота у каждого товара своя. */
@media (max-width: 1000px) {
  .nw-kfgx-pricebox { position: static !important; bottom: auto !important; }
  .nw-kfgx-panel { max-height: none !important; }
  .nw-kfgx-steps { overflow-y: visible !important; max-height: none !important; }
}

/* Единица измерения в подписи шага НЕ в верхнем регистре: «ŠÍŘKA CM» читается
   как кириллическое «СМ», хотя буквы латинские — трансформ и вводил в
   заблуждение. Теперь «ŠÍŘKA cm». */
.nw-kfgx-t small { text-transform: none; }

/* --- Виджет конфигуратора на главной: «Přidat do košíku» и «Otevřít celý
       konfigurátor» в один ряд. Здесь это безопасно, в отличие от блока покупки
       на карточке товара: подписи короче и рядом нет степпера количества. --- */
@media (max-width: 900px) {
  .nwhk .nw-kfgx-actions { flex-direction: row !important; gap: 8px; flex-wrap: wrap; }
  .nwhk .nw-kfgx-actions > * {
    flex: 1 1 130px; min-width: 0;
    padding-left: 10px; padding-right: 10px;
    font-size: 13px; text-align: center;
  }
}

/* --- Чекаут на телефоне: сначала ЧТО покупаем, потом форма и оплата ------
   В одну колонку сводка заказа уходила в самый низ, и человек заполнял поля,
   не видя ни состава заказа, ни суммы. Порядок меняем через order у грида —
   разметку не трогаем, на десктопе колонки остаются как были. */
@media (max-width: 860px) {
  .nw-checkout-grid > .nw-summary { order: -1; margin-bottom: 4px; }
  .nw-checkout-grid > .nwauth-msg { order: -2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. Третий обход клиента (2026-08-14)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* --- Пустая полоса перед футером: у него инлайновый margin-top:48px ------
     На телефоне это почти треть экрана пустоты между контентом и футером. */
  body .dd-page > .dd-full:last-of-type { margin-top: 18px !important; }

  /* --- Карта: подпись налезала на «булавку» --------------------------------
     Булавка центрирована по top:44%, её пульсирующее кольцо 64px доходит до
     +32px, а подпись стояла на +30px — то есть заезжала на кольцо.
     Отодвигаем подпись ниже кольца. */
  #sec-mapa div[style*="translate(-50%, 30px)"] {
    transform: translate(-50%, 46px) !important;
    font-size: 11.5px !important;
    padding: 7px 11px !important;
    max-width: calc(100% - 24px);
    white-space: normal !important;
    text-align: center;
  }

  /* --- Сердечко «Uložit» в заголовке товара --------------------------------
     Голая иконка 35×35 висела в конце последней строки H1 и читалась как
     случайный элемент. Делаем нормальную пилюлю с подписью на своей строке
     (display:flex делает элемент блочным, поэтому перенос гарантирован). */
  body .nw-pp-titlebox h1 .nw-pp-fav {
    display: flex !important;
    width: fit-content;
    margin: 12px 0 0 !important;
    padding: 8px 15px 8px 12px !important;
    border-radius: 99px;
    font-size: 12.5px !important;
    line-height: 1;
    gap: 8px;
  }
  body .nw-pp-titlebox h1 .nw-pp-fav .nw-pp-fav-t { display: inline !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. Четвёртый обход клиента (2026-08-14)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* --- Кнопки покупки на товаре: «Přidat do košíku» и «Nezávazná poptávka»
         в один ряд (просьба клиента). Ключевое — обе кнопки обязаны СЖИМАТЬСЯ:
         в прошлый раз без min-width:0 и с фиксированной высотой вторая кнопка
         уезжала за экран на 313px. Поэтому flex:1 1 0, перенос строки внутри
         кнопки разрешён, высота считается по содержимому. */
  /* Без .nw-pp-buybox в селекторе: у товара С КОНФИГУРАТОРОМ ценовой блок
     называется просто .nw-kfgx-pricebox, и правило, привязанное к .nw-pp-buybox,
     до него не доставало — то есть до кнопок из скриншота клиента. */
  body .nw-kfgx-actions {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
  }
  body .nw-kfgx-actions > * {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    font-size: 12.5px !important;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    height: auto !important;
    min-height: 46px;
  }
  /* Иконка корзины внутри кнопки прижималась к левому краю, пока подпись
     переносилась по центру — кнопка выглядела кривой. На узкой кнопке она
     ничего не добавляет, оставляем только текст. */
  body .nw-kfgx-actions .nw-cta-cart svg,
  body .nw-pp-buybox .nw-buy-row .nw-cta-cart svg { display: none !important; }
  body .nw-kfgx-actions .nw-cta-cart { gap: 0 !important; }

  /* --- Пустота в конце страницы. Складывалась из трёх слагаемых:
         .nw-main padding-bottom 64px + нижняя секция товара margin-bottom 46px
         + margin-top футера. На телефоне это выглядело как забытый пустой экран
         после формы «Potřebujete poradit?». Снимаем все три. */
  body .dd-page > .nw-main { padding-bottom: 10px !important; }
  /* Только ПОСЛЕДНЯЯ секция страницы: на главной такая же форма стоит в
     середине, и без :last-child она слипалась со следующей секцией. */
  body .nw-pp-bottom:last-child,
  body .nwcat-poradit:last-child,
  body .nw-pp-poradit:last-child { margin-bottom: 0 !important; }

  /* --- Футер, блок подписки: 44px между подзаголовком и полем e-mail --- */
  body .dd-page > .dd-full > div:first-child { gap: 14px !important; padding-top: 26px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. Отзывы: одинаковая высота карточек + «Zobrazit více» (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   Карточки были разной высоты (текст от двух строк до пятнадцати) и лента
   занимала пол-экрана. Теперь текст обрезается по шести строкам — карточки
   выравниваются друг под друга, а длинные отзывы получают кнопку, которая
   раскрывает ТОЛЬКО свою карточку. Кнопку проставляет assets/mobile.js
   тем карточкам, где текст реально не поместился.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nwrev-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .nwrev-card.is-more .nwrev-text {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
  /* Высоту карточек морозит mobile.js (inline min-height), а выравнивание
     переводит на flex-start — иначе раскрытая карточка растягивала ВЕСЬ ряд,
     и соседние пустели на пол-экрана. */
  .nwrev-track > .nwrev-card { flex: 0 0 268px; }

  .nwrev-more {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid #E4E7EC;
    border-radius: 99px;
    background: #fff;
    font: 700 12px Inter, sans-serif;
    color: #A9633A;
    cursor: pointer;
    line-height: 1.2;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .nwrev-more:hover { border-color: #A9633A; background: #FBF4EC; color: #8A4E28; }
  .nwrev-card.is-more .nwrev-more { color: #667085; }
  .nwrev-card.is-more .nwrev-more:hover { color: #101828; }
}

/* ══════════════════════════════════════════════════════════════════════════
   13. Галерея фотографий товара: одна строка вместо двух (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   Превью были flex-wrap:wrap и на телефоне складывались в два-три ряда,
   съедая экран. Делаем один ряд с горизонтальной прокруткой: пальцем свайп,
   мышью — перетаскивание (обработчик в assets/mobile.js).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nw-pp-thumbs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    cursor: grab;
    /* у макета на <html> стоит scroll-behavior:smooth — он анимировал бы
       каждый кадр перетаскивания и лента ощущалась бы залипшей */
    scroll-behavior: auto;
  }
  .nw-pp-thumbs::-webkit-scrollbar { display: none; height: 0; }
  .nw-pp-thumbs.is-drag { cursor: grabbing; }
  .nw-pp-thumbs.is-drag * { pointer-events: none; user-select: none; }
  .nw-pp-thumbs > * { flex: 0 0 auto; scroll-snap-align: start; }
  .nw-pp-thumb img, .nw-pp-media .nw-gal-thumb { width: 76px !important; height: 58px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. Карта: подпись под булавкой — на ВСЕХ ширинах (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   Булавка центрирована по top:44%, её пульсирующее кольцо 64px доходит до
   +32px от центра, а подпись стояла на +30px — то есть заезжала на кольцо
   и на «хвост» булавки. На десктопе это видно так же, как на телефоне.
   ══════════════════════════════════════════════════════════════════════════ */
#sec-mapa div[style*="translate(-50%, 30px)"] { transform: translate(-50%, 42px) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   15. Вход из чекаута в модальном окне (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   Карточка входа приезжает со страницы /ucet/ как есть, поэтому здесь только
   подгонка под окно: тёмная панель выгод в модалке лишняя, сетка в одну
   колонку, у самой карточки убираем собственную рамку и тень.
   ══════════════════════════════════════════════════════════════════════════ */
.nw-modal--auth .nw-modal-win { max-width: 460px; }
.nw-modal--auth .nw-modal-body { padding: 0; }
.nw-modal--auth .nwauth-grid { display: block; box-shadow: none; border: 0; border-radius: 0; margin: 0; }
.nw-modal--auth .nwauth-side { display: none; }
.nw-modal--auth .nw-crumbs { display: none; }
.nw-modal--auth .nwauth { margin: 0; padding: 0; max-width: none; }
.nw-modal--auth .nw-modal-body.is-busy { opacity: .5; pointer-events: none; transition: opacity .15s ease; }
@media (max-width: 560px) {
  .nw-modal--auth .nw-modal-win { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. Сводка заказа в чекауте: количество и удаление (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   Компактно: маленький счётчик под названием и крестик справа. На десктопе
   крестик проявляется при наведении на строку, на тач-экранах виден всегда —
   там наведения не существует.
   ══════════════════════════════════════════════════════════════════════════ */
/* Строку раскладываем СЕТКОЙ, а не флексом: две колонки minmax(0,1fr) auto
   гарантируют, что название занимает всё оставшееся место и переносится
   нормально, а цена с крестиком встают справа и физически не могут наехать
   на текст (флекс это допускал — название сжималось до одного слова в строку). */
.shopx-sum-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
}
.shopx-sum-line .nw-summary-item { min-width: 0; align-items: flex-start; }
.shopx-sum-line .nw-summary-img { width: 52px; height: 42px; }
.shopx-sum-body { display: block; min-width: 0; }
.shopx-sum-line .nw-summary-link { display: block; }
.shopx-sum-attrs { margin-top: 6px; }
/* конфигурация свёрнута по умолчанию, раскрывается целиком (без обрезки) */
.shopx-sum-attrs.is-off { display: none; }
.shopx-sum-attrs.is-open { display: block; -webkit-line-clamp: unset; }
.shopx-sum-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 4px 9px;
  border: 1px solid #E4E7EC; border-radius: 99px; background: #fff;
  font: 600 11.5px Inter, sans-serif; color: #667085; cursor: pointer; line-height: 1.2;
}
.shopx-sum-toggle:hover { border-color: #A9633A; color: #A9633A; }
.shopx-sum-car { font-size: 9px; transition: transform .18s ease; }
.shopx-sum-toggle[aria-expanded="true"] .shopx-sum-car { transform: rotate(180deg); }
.shopx-sum-qty {
  display: inline-flex; align-items: center; margin-top: 7px;
  border: 1px solid #E4E7EC; border-radius: 8px; background: #fff; overflow: hidden;
}
.shopx-sum-qty .nw-step-btn {
  width: 26px; height: 28px; border: 0; background: none; color: #667085;
  font: 700 15px/1 Inter, sans-serif; cursor: pointer; padding: 0;
}
.shopx-sum-qty .nw-step-btn:hover { background: #F4F6F8; color: #101828; }
.shopx-sum-qty .nw-step-input {
  width: 38px; height: 28px; padding: 0;
  border: 0; border-left: 1px solid #E4E7EC; border-right: 1px solid #E4E7EC;
  text-align: center; font-weight: 700; color: #101828; background: #fff;
  -moz-appearance: textfield;
}
.shopx-sum-qty .nw-step-input::-webkit-outer-spin-button,
.shopx-sum-qty .nw-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.shopx-sum-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* Название занимает всю ширину строки, под ним одной линией счётчик и цена.
   Так и на телефоне (просьба клиента), и на десктопе: сводка живёт в узкой
   колонке ~360px, и в две колонки название ужималось до одного слова в строку. */
.shopx-sum-line { grid-template-columns: 1fr; }
/* Счётчик и цена стоят РЯДОМ и выровнены под описанием (отступ = ширина
   миниатюры + зазор), а не разъезжаются по краям строки. */
.shopx-sum-right {
  flex-direction: row; align-items: center; justify-content: flex-start;
  width: 100%; gap: 12px; margin-top: 6px; padding-left: 62px;
}
.shopx-sum-right .shopx-sum-qty { order: -1; margin-top: 0; }
.shopx-sum-line .nw-summary-item { padding-right: 24px; }   /* место под крестик */
@media (max-width: 900px) { .shopx-sum-x { opacity: 1; } }
.shopx-sum-line { position: relative; }
.shopx-sum-x {
  position: absolute; top: 0; right: -2px;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: #98A2B3; font: 400 18px/1 Inter, sans-serif; cursor: pointer;
}
.shopx-sum-x:hover { background: #FEF3F2; color: #D92D20; }
@media (hover: hover) and (pointer: fine) {
  .shopx-sum-x { opacity: 0; transition: opacity .15s ease; }
  .shopx-sum-line:hover .shopx-sum-x,
  .shopx-sum-x:focus-visible { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. Подсказки поиска на телефоне (2026-08-14)
   ──────────────────────────────────────────────────────────────────────────
   cart.js ставит окошку inline-ширину max(ширина поля, 320px) и левый край по
   полю ввода — на 390px это давало правый край 408, то есть вылет за экран.
   Инлайновые стили перебиваем !important и равняем панель ПО БЛОКУ ПОИСКА:
   те же 14px по краям, что и у шапки, — окно встаёт ровно под полем.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nw-suggest {
    left: 14px !important;      /* = боковой отступ шапки, ширина строки поиска */
    right: 14px;
    width: auto !important;
    max-width: none !important;
  }
  /* Указатель должен смотреть на ПОЛЕ ВВОДА, а не на кнопку категорий:
     панель теперь начинается от края экрана, и треугольник на 26px попадал
     ровно в «Vše». Поле начинается примерно на 88px, туда и целимся. */
  .nw-suggest::before { left: 86px; }
  .nw-suggest::after { left: 87px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   18. Кабинет: фактуры и зона удаления аккаунта (2026-08-14)
   ══════════════════════════════════════════════════════════════════════════ */
.nwacc-invoices { width: 100%; border-collapse: collapse; margin-top: 4px; }
.nwacc-invoices th {
  text-align: left; padding: 8px 10px; font: 700 11px Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #667085;
  border-bottom: 1px solid #E4E7EC;
}
.nwacc-invoices td { padding: 12px 10px; border-bottom: 1px solid #F0F2F4; font: 500 13.5px Inter, sans-serif; color: #101828; }
.nwacc-invoices tr:last-child td { border-bottom: 0; }
.nwacc-invoices-a { text-align: right; white-space: nowrap; }
.nwacc-inv-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1.5px solid #E4E7EC; border-radius: 9px;
  font: 700 12.5px Inter, sans-serif; color: #101828; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nwacc-inv-btn:hover { border-color: #A9633A; color: #A9633A; background: #FBF7F3; text-decoration: none; }

.nwacc-sec--danger { border: 1px solid #FDA29B; background: #FFFBFA; }
.nwacc-sec--danger .nwacc-sech h2 { color: #B42318; }
.nwacc-cta--danger { background: #D92D20; }
.nwacc-cta--danger:hover { background: #B42318; }

/* на телефоне таблица фактур превращается в карточки: подписи из data-th */
@media (max-width: 640px) {
  .nwacc-invoices thead { display: none; }
  .nwacc-invoices, .nwacc-invoices tbody, .nwacc-invoices tr, .nwacc-invoices td { display: block; width: 100%; }
  .nwacc-invoices tr { border: 1px solid #E4E7EC; border-radius: 11px; padding: 10px 12px; margin-bottom: 10px; }
  .nwacc-invoices td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
  .nwacc-invoices td::before { content: attr(data-th); color: #667085; font-weight: 600; }
  .nwacc-invoices-a { justify-content: flex-end !important; margin-top: 8px; }
  .nwacc-invoices-a::before { content: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   19. Затемнение страницы под открытым мега-меню (десктоп)
   ──────────────────────────────────────────────────────────────────────────
   Подложку монтирует mobile.js прямо в <html>, а не внутрь .dd-nav: строка
   навигации липкая и с z-index, то есть образует свой контекст наложения —
   элемент внутри неё не смог бы одновременно быть НАД контентом страницы и
   ПОД кнопками самой строки. Снаружи всё просто: 40 — ниже шапки (45),
   выше контента (auto).
   На телефоне подложка не нужна: там меню и так на весь экран.
   ══════════════════════════════════════════════════════════════════════════ */
.nwmega-backdrop { display: none; }

@media (min-width: 901px) {
  .nwmega-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(16, 24, 40, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    cursor: pointer;
  }
  .nwmega-backdrop.is-on { opacity: 1; visibility: visible; }

  /* Шапка целиком остаётся яркой: меню — её часть, и притемнять логотип
     с поиском вместе со страницей выглядит ошибкой. Поднимаем обе строки
     над подложкой (класс на <html> ставит mobile.js). */
  html.nw-megaopen .dd-page > .dd-promo,
  html.nw-megaopen .dd-page > .dd-head {
    position: relative;
    z-index: 46;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   20. Кадрирование фотографии в герое главной (только десктоп)
   ──────────────────────────────────────────────────────────────────────────
   Окно героя ниже самой фотографии, поэтому object-fit:cover обрезает её по
   центру — и ламельная крыша, о которой говорит заголовок, уходила за верхний
   край. Сдвигаем кадр к верху: крыша видна целиком, пара на диване не режется.
   На телефоне пропорции блока другие, там центр по-прежнему лучше.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .nw-hero-img { object-position: 50% 20%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   21. Hero главной на планшете и телефоне (05.11.2026)
   ──────────────────────────────────────────────────────────────────────────
   Раньше держался на селекторах по тексту inline-стилей ([style*="height:
   404px"] и т.п.): хрупко, после правки высоты кнопки обрезались. Теперь у
   элементов свои классы (.nwh-*), правила ниже перекрывают inline-стили.
   Телефон: фото фоном на всю карточку, текст прижат к низу на тёмном
   градиенте, кнопки во всю ширину одна под другой, карточки справа уходят
   под героя парой.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dd-page .nwh-wrap.nwh-wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important;
                                padding: 16px 20px 0 !important; }
  .dd-page .nwh-stage .nwh-body { max-width: 620px !important; padding: 32px 28px 28px !important; }
  .dd-page .nwh-stage .nwh-h1 { font-size: 36px !important; line-height: 1.1 !important; }
  .dd-page .nwh-stage .nwh-cta { flex-wrap: wrap !important; }
}

@media (max-width: 620px) {
  .dd-page .nwh-wrap.nwh-wrap { padding: 12px 16px 0 !important; gap: 10px !important; }

  .dd-page .nwh-wrap .nwh-stage { display: flex !important; flex-direction: column !important;
                                  justify-content: flex-end !important;
                                  height: auto !important; min-height: 500px !important; border-radius: 14px !important; }
  .dd-page .nwh-stage .nwh-hero-img,
  .dd-page .nwh-stage .nw-hero-img { object-position: 60% 30% !important; }
  /* градиент снизу вверх: верх кадра (ламели) виден, текст читается на тёмном */
  .dd-page .nwh-stage .nwh-shade { background: linear-gradient(180deg,
                                    rgba(10,14,22,0.10) 0%, rgba(10,14,22,0.35) 28%,
                                    rgba(10,14,22,0.82) 55%, rgba(10,14,22,0.94) 100%) !important; }

  .dd-page .nwh-stage .nwh-body { max-width: none !important; width: 100% !important; box-sizing: border-box !important;
                                  padding: 20px 18px 18px !important; }
  .dd-page .nwh-stage .nwh-badge { font-size: 11px !important; padding: 6px 10px !important;
                                   margin-bottom: 12px !important; gap: 7px !important; }
  .dd-page .nwh-stage .nwh-h1 { font-size: 28px !important; line-height: 1.12 !important;
                                letter-spacing: -0.03em !important; margin-bottom: 8px !important;
                                overflow-wrap: break-word; hyphens: auto; }
  .dd-page .nwh-stage .nwh-sub { font-size: 15px !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
  .dd-page .nwh-stage .nwh-price { flex-wrap: wrap !important; gap: 2px 10px !important; margin-bottom: 14px !important; }
  .dd-page .nwh-stage .nwh-now { font-size: 25px !important; line-height: 1.15 !important; }
  .dd-page .nwh-stage .nwh-old { font-size: 15px !important; }
  .dd-page .nwh-stage .nwh-akce { font-size: 12.5px !important; line-height: 1.45 !important; margin: -6px 0 16px !important; }

  .dd-page .nwh-stage .nwh-cta { flex-direction: column !important; gap: 8px !important; }
  .dd-page .nwh-stage .nwh-btn { display: flex !important; align-items: center !important; justify-content: center !important;
                                 width: 100% !important; box-sizing: border-box !important; min-height: 50px !important;
                                 padding: 13px 18px !important; font-size: 15px !important; text-align: center !important; }

  .dd-page .nwh-wrap .nwh-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
                                 grid-template-rows: auto !important; gap: 10px !important; }
  .dd-page .nwh-wrap .nwh-side > * { padding: 14px 14px 16px !important; min-width: 0 !important; }
  .dd-page .nwh-wrap .nwh-side [style*="font:800 20px"],
  .dd-page .nwh-wrap .nwh-side [style*="font: 800 20px"] { font-size: 15px !important; }
  .dd-page .nwh-wrap .nwh-side [style*="font:500 13px"],
  .dd-page .nwh-wrap .nwh-side [style*="font: 500 13px"] { font-size: 12px !important; margin-bottom: 10px !important; }
}

@media (max-width: 360px) {
  .dd-page .nwh-stage .nwh-h1 { font-size: 25px !important; }
  .dd-page .nwh-stage .nwh-now { font-size: 22px !important; }
  .dd-page .nwh-wrap .nwh-side { grid-template-columns: minmax(0, 1fr) !important; }
}