/* =====================================================================
   beltorgi.by — исправления вёрстки (layout_fix_2026-10-06, v4)
   ---------------------------------------------------------------------
   Подключается ПОСЛЕДНИМ (после style_new.css и bootstrap). Только
   переопределения через каскад: разметку, тексты, подписи, цвета, шрифты
   и JS не трогает. Откат: убрать <link> на этот файл из чанка new-head.
   ===================================================================== */

/* ---------- 0. Шрифт (v4) ---------- */
/* был только TTF 330 КБ без font-display: пока он грузится, браузер прячет
   ВЕСЬ текст (до 3 с) — страница «пустая», потом текст появляется.
   Теперь WOFF2 98 КБ (тот же шрифт, те же глифы) + font-display:swap,
   а на время загрузки — Arial, подогнанный по метрикам под Montserrat,
   чтобы при подмене шрифта текст почти не прыгал.
   Своё имя семейства: если назвать его тоже «Montserrat», Chrome всё равно
   качает старый TTF из style_new.css и прячет текст, пока тот грузится. */
@font-face{
  font-family:"Montserrat WOFF2";
  src:url("static/Montserrat-Regular.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Montserrat Fallback";
  src:local("Arial"),local("ArialMT"),local("Helvetica");
  size-adjust:113.95%;ascent-override:84.95%;descent-override:22.03%;line-gap-override:0%;
}
*,.montserrat{font-family:"Montserrat WOFF2","Montserrat Fallback",Arial,sans-serif}

/* ---------- 1. Карточка лота: фото ---------- */
/* фото заполняет блок 1.3 целиком: в категории у <img> в разметке
   max-width:350px (на телефоне справа белая полоса), а превью другой
   пропорции стояли с белой полосой сверху/снизу */
.card > .card-img-top[id^="card-img-top-"]{aspect-ratio:1.3;height:auto}
.card > .card-img-top[id^="card-img-top-"] > a{display:block;height:100%}
.card > .card-img-top[id^="card-img-top-"] > a > img{
  display:block;width:100% !important;max-width:100% !important;
  height:100% !important;aspect-ratio:auto;object-fit:cover;box-shadow:none;
}

/* ---------- 2. Карточка лота: название ---------- */
/* было: блок фикс. высоты 115px с прокруткой — текст обрезался
   посреди строки, у коротких названий — пустота */
.card .card-body .card-title{height:auto !important;overflow:visible !important}
.card .card-body .card-title a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  /* было word-break:break-all — рвало слова посередине («LADA L|ARGUS») */
  word-break:normal !important;overflow-wrap:anywhere;
  min-height:0 !important; /* .midcol a.text-dark{min-height:135px} ожил бы от display:box */
}

/* ---------- 3. Карточка лота: цена ---------- */
/* цена/НДС на одной линии во всех карточках ряда (со старой ценой и без) */
.card > .card-footer{height:auto !important}
.card > .card-footer .myprice{min-height:52px;align-items:flex-end !important}
.card > .card-footer .myprice .bg-success{white-space:nowrap}

/* ---------- 4. Страница лота: таблицы «подпись / значение» ---------- */
/* .lh-1 (межстрочный 1.0) слеплял многострочный текст разделов */
.row.lh-1 > [class*="col-"],.row.lh1 > [class*="col-"]{line-height:1.45}
.row.lh-1 > [class*="col-"] p,.row.lh1 > [class*="col-"] p{margin-bottom:.5rem}

/* ---------- 5. Главная: блок «Новости» ---------- */
/* карточки p-2 и h6 с межстрочным 1.2 — текст слипался у рамки */
.row[data-masonry] > .col > .card.p-2{padding:12px 16px !important}
.row[data-masonry] > .col > .card .h6{line-height:1.4;margin-bottom:0} /* v3: размер шрифта не трогаем (был 15px) */

/* ---------- 6. Загрузка страниц (v4) ---------- */
/* подложка под фото карточек, пока картинка не пришла (не белая дыра) */
.card > .card-img-top[id^="card-img-top-"]{background:#f1f1f1}
/* галерея лота до запуска слайдера (fotorama подгружается в самом конце
   страницы): раньше все фото стояли столбиком во всю ширину, потом
   схлопывались в слайдер. Теперь сразу видно только первое фото в том же
   блоке 16:9, что и у готового слайдера. */
#msGallery .fotorama > a{display:none}
#msGallery .fotorama > a:first-child{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:1392px;aspect-ratio:16/9;overflow:hidden;background:#fff;
}
#msGallery .fotorama > a:first-child > img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* =====================  ТЕЛЕФОН / ПЛАНШЕТ  ===================== */
@media (max-width: 991.98px){

  /* ---- шапка: поиск был овалом 45×69, иконки на разной высоте ---- */
  header .header > .d-flex.justify-content-start{flex:1 1 auto;min-width:0}
  header .header > .d-flex.justify-content-start img{max-width:100%;height:auto}
  header .header > .d-flex.justify-content-end{align-items:center;flex:0 0 auto}
  header .header > .d-flex.justify-content-end > *{align-self:center}
  header .search-area .sbord{
    height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;
  }
  header .search-area .search-form{display:flex;align-items:center;height:100%}
  header .search-area .search-form button{margin:0 !important;width:38px;padding:0 !important}
  /* v2: в свёрнутом виде — круг 40×40, как телефон и профиль рядом
     (поле ввода нулевой ширины + кнопка давали пилюлю 60×40);
     раскрытый поиск (.allw из script.js) — на всю ширину, как было */
  header .search-area:not(.allw) .sbord{width:40px;padding:0;overflow:hidden}
  header .search-area:not(.allw) .search-form input[name="search"]{display:none}
  header .search-area.allw .sbord{width:100%}

  /* ---- плитки категорий: длинные названия вылезали за рамку,
          счётчик налезал на рамку ---- */
  .mi-mobile > div{min-height:54px;padding:6px 8px !important}
  .mi-mobile > div > div:first-child img{width:30px !important;height:30px !important}
  .mi-mobile > div > .ms-2{min-width:0}
  .mi-mobile > div a{font-size:14px;line-height:1.15 !important;overflow-wrap:anywhere}
  .mi-mobile .mob-cat-count{top:2px;right:6px;font-size:11px;line-height:1}

  /* ---- плашка «До конца срока приема заявок» (#dedline.mfixed, script.js
          включает её на ширине <=900) закрывала логотип и поиск ---- */
  /* v2: у лотов без срока приёма заявок блок пустой — была пустая зелёная
     полоса с крестиком; после нажатия на крестик script.js делает плашку
     прозрачной (opacity:0) — оставалось пустое место и невидимая полоса
     перехватывала нажатия по шапке. Плашка — в одну строку, высота 40px. */
  body:has(#dedline.mfixed:not(:empty):not([style*="opacity: 0"])){padding-top:40px}
  #dedline.mfixed:empty,#dedline.mfixed[style*="opacity: 0"]{display:none !important}
  #dedline.mfixed{
    display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
    width:100% !important;height:40px;line-height:1.2;font-size:13px;white-space:nowrap;
  }
  #dedline.mfixed > div:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
/* v4: плашка закреплена сверху сразу, ещё до запуска script.js (он включает
   .mfixed на той же ширине <=900px) — раньше страница после загрузки
   съезжала вниз на высоту плашки */
@media (max-width: 900px){
  #dedline:not(:empty){
    position:fixed;top:0;left:0;z-index:9999;margin:0 !important;
    background:#1cc309;color:#fff;padding:4px 16px;
    display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
    width:100% !important;height:40px;line-height:1.2;font-size:13px;white-space:nowrap;
  }
  #dedline:not(:empty) > div:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #dedline:empty,#dedline[style*="opacity: 0"]{display:none !important}
  body:has(#dedline:not(:empty):not([style*="opacity: 0"])){padding-top:40px}
  /* «Правила проведения торгов» script.js переносит вниз страницы (#rules-mobile)
     только после ответа credit_js.php (~2 с) — до этого они стояли над ценой
     и потом исчезали. Не показываем их наверху, пока не перенесены. */
  body:has(#credit-desktop-js):has(#rules-mobile:empty) #rules{display:none}
}
@media (max-width: 991.98px){

  /* ---- хлебные крошки: на лоте разъезжались на 3 строки из-за полного
          названия лота (оно же — заголовок h1 сразу ниже) → одна строка.
          v2: в v1 ссылки не сжимались — при длинных разделах страница
          становилась шире экрана, а название лота пропадало целиком.
          Теперь сжимаются и ссылки (с многоточием), название — не уже 4em ---- */
  nav[aria-label="breadcrumb"]{min-width:0;max-width:100%}
  .breadcrumb{flex-wrap:nowrap;align-items:baseline;white-space:nowrap;min-width:0;overflow:hidden;line-height:1.3 !important}
  .breadcrumb > .breadcrumb-item{flex:0 1 auto;min-width:2.5em;overflow:hidden;text-overflow:ellipsis}
  .breadcrumb > .breadcrumb-item:first-child{flex:0 0 auto;min-width:0}
  .breadcrumb > .breadcrumb-item.active{flex:1 1 0;min-width:4em}
  /* промежуточные уровни скрываем: «домик / родительский раздел / страница»
     (иначе 4–5 длинных уровней сжимались до «А… / Не… / Ком…») */
  .breadcrumb > .breadcrumb-item:not(:first-child):not(.active):not(:nth-last-child(2)){display:none}
  .breadcrumb > .breadcrumb-item:nth-last-child(2):not(:first-child){min-width:4em}

  /* ---- v2: страница не должна быть шире экрана ---- */
  /* длинные слова в заголовках («сельскохозяйственные») — перенос по слогам */
  h1,.h1{overflow-wrap:break-word;hyphens:auto}
  .catlots-main > .d-flex > div:first-child{min-width:0}
  /* таблицы из редактора в новостях (класс table-responsive стоит на самой
     таблице, а не на обёртке — прокрутка не работала) */
  .newscontent table{display:block;max-width:100%;overflow-x:auto;width:auto !important}
  /* пагинация (магазин, 21 страница) — перенос строк */
  .pagination{flex-wrap:wrap;row-gap:6px}

  /* ---- страница лота ---- */
  /* подписи в узкой колонке рвались посреди слова («Местонахожден|ие») */
  .row.lh-1 > .col-5,.row.lh1 > .col-5{font-size:14px;hyphens:auto}
}