/*
 * poroda-responsive.css — стили для ID-независимого адаптивного движка (poroda-responsive.js).
 * Десктоп (>1200px) — эталон, ничего не показываем/не меняем.
 */

/* базовый анти-горизонтальный-скролл */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* грид-карточки и заголовок направления по умолчанию скрыты (десктоп показывает оригинал) */
.prg-grid, .prg-head { display: none; }

@media (max-width: 1200px) {

  /* Захваченная десктопная часть шапки остаётся за пределами мобильного артборда.
     Она скрыта визуально, но без clip всё равно раздувает scrollWidth документа. */
  #t-header, #t-header .t396, #t-header .t396__artboard {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
  #t-header .t396__elem:not([data-field-left-res-320-value]),
  #t-header .t396__elem[data-field-top-res-320-value^="-"] {
    display: none !important;
  }

  /* Tilda hover-подменю (t794): без t794_init (движок Tilda не бутстрапится) они
     рендерятся развёрнутыми инлайн и заваливают шапку. На мобильном навигация — через
     бургер, поэтому прячем эти выпадашки. На десктопе (>1200) остаются hover-дропдауны. */
  .t794__tooltip-menu { display: none !important; }

  /* Мобильный дропдаун-переключатель вкладок каталога (t395 <select>) дублирует
     заголовок направления: наш грид показывает ВСЕ направления секциями — прячем. */
  .t395__select { display: none !important; }

  /* ---- грид-блоки: прячем оригинальные абсолютные элементы, показываем адаптивный грид ---- */
  [data-prg="grid"] > .t396__elem,
  [data-prg="grid"] > .t396__carrier,
  [data-prg="grid"] > .t396__filter { display: none !important; }
  [data-prg="grid"] { box-sizing: border-box !important; padding: 6px 16px 26px !important; }

  .prg-head { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; color: #17181a; margin: 4px 0 16px; }
  .prg-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .prg-card {
    display: flex; flex-direction: column;
    border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden;
    background: #fff; text-decoration: none !important; color: #17181a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  }
  .prg-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
  .prg-img {
    display: block; width: 100%; height: 160px;
    background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #fff;
  }
  .prg-label { display: block; padding: 12px 14px 16px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #17181a !important; }

  /* ---- flow-блоки: контейнер по контенту, элементы в вертикальном потоке ---- */
  [data-prg="flow"] {
    display: block !important;
    box-sizing: border-box !important;
    padding: 6px 18px 22px !important;
    overflow: visible !important;
  }
  [data-prg="flow"] > .t396__carrier,
  [data-prg="flow"] > .t396__filter { display: none !important; }
  [data-prg="flow"] .tn-atom {
    position: relative !important;
    width: auto !important; max-width: 100% !important;
    white-space: normal !important; overflow: visible !important;
  }
  [data-prg="flow"] .tn-atom ul, [data-prg="flow"] .tn-atom ol, [data-prg="flow"] .tn-atom li,
  [data-prg="flow"] .tn-atom p, [data-prg="flow"] .tn-atom div, [data-prg="flow"] .tn-atom span {
    max-width: 100% !important; box-sizing: border-box !important;
    word-break: break-word !important; overflow-wrap: break-word !important;
  }
}

@media (max-width: 1200px) {
  /* Унифицированная мобильная карточка товара. */
  [data-prg="product"] {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    gap: 14px !important;
    padding: 10px 18px 28px !important;
    overflow: visible !important;
  }
  [data-prg="product"] > .t396__carrier,
  [data-prg="product"] > .t396__filter { display: none !important; }
  [data-prg="product"] > .t396__elem { box-sizing: border-box !important; }
  [data-prg="product"] .prg-product-gallery { order: 1; min-height: 240px !important; }
  [data-prg="product"] .prg-product-title { order: 2; }
  [data-prg="product"] .prg-product-meta { order: 3; }
  [data-prg="product"] .prg-product-cta { order: 4; }
  [data-prg="product"] .prg-product-benefit { order: 5; }
  [data-prg="product"] .prg-product-decoration { display: none !important; }
  [data-prg="product"] h1.tn-atom {
    width: 100% !important; height: auto !important; max-width: 100% !important;
    font-size: 26px !important; line-height: 1.16 !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
  }
  [data-prg="product"] .prg-product-meta .tn-atom,
  [data-prg="product"] .prg-product-benefit .tn-atom { width: 100% !important; height: auto !important; white-space: normal !important; }
  [data-prg="product"] .prg-product-cta .tn-atom { width: 100% !important; max-width: 100% !important; }

  /* Tilda-слайдер после переноса в поток сохранял десктопный transform и показывал пустоту. */
  [data-prg="product"] .t-slds,
  [data-prg="product"] .t-slds__main,
  [data-prg="product"] .t-slds__container,
  [data-prg="product"] .t-slds__items-wrapper { width: 100% !important; height: 240px !important; }
  [data-prg="product"] .t-slds__items-wrapper { transform: none !important; left: 0 !important; top: 0 !important; }
  [data-prg="product"] .t-slds__item { display: none !important; }
  [data-prg="product"] .t-slds__item_active {
    display: block !important; position: absolute !important;
    inset: 0 !important; width: 100% !important; height: 240px !important;
  }
  [data-prg="product"] .tn-atom__slds-img { width: 100% !important; height: 240px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
  [data-prg="product"] .t-slds__arrow_container { height: 240px !important; }

  /* Единая типографика смысловых подзаголовков на узких экранах. */
  .t-records h2.tn-atom { font-size: 26px !important; line-height: 1.18 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
}
@media (min-width: 481px) and (max-width: 1200px) { .prg-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 801px) and (max-width: 1200px) { .prg-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Широкие таблицы (напр. «Типы дробилок: в чём разница») на мобильном — горизонтальный
   скролл внутри своего контейнера, чтобы не ломать страницу. */
@media (max-width: 1200px) {
  .t-rec table, .t396__artboard table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}