/* ================================================================== Адаптивні фікси, 03.09.2026. Файл підключається в head.blade.php ПІСЛЯ styles.css, тому перебиває його без !important. Правила НЕ дублюються в resources/sass/ — там лишається початковий код; це свідомо, щоб не чіпати мініфікований public/css/styles.css (491 КБ) і не запускати npm run prod на деві. ================================================================== */ /* ---- 1. Сітка послуг вилазила на 320px ---------------------------- У irbis-home.scss рядок ~1373 задає `@media (max-width: 430px) { repeat(2, 1fr) }`, і він іде ПІСЛЯ правил «≤600px → 1fr», тобто перебиває їх. На 320px дві колонки давали треки 166+14+149 = 329px при доступних 292px — документ ставав 343px і зʼявлявся горизонтальний скрол. Дві колонки на 360–430px лишаємо (так і було задумано, вони влазять), а нижче 360px згортаємо в одну: інакше на текст лишається 95px. */ @media (max-width: 359px) { .irbis-services__grid { grid-template-columns: 1fr; } } /* Картка була content-box, тож padding 20/22px додавався ПОВЕРХ ширини колонки — саме через це min-content треку виходив ширшим за сітку. */ .irbis-service-card { box-sizing: border-box; } /* ---- 2. Колонки футера на мобілці -------------------------------- footer_style.scss (рядок ~321, у @media max-width:1023px) ставить `.footer-contacts { text-align: center }`, а заголовкам колонок — `left`. Короткі посилання шрink-wrap'ляться і виглядають ліворуч, а єдине довге («Мережа представництв») переноситься на два рядки й центрується — колонка виглядає розсипаною. Вирівнюємо вміст колонок ліворуч, як заголовки. Соцмережі не чіпаємо: вони в .footer-contacts-socnet-* і центруються тим самим правилом. */ @media screen and (max-width: 1023px) { .footer-content .footer-contacts-cities { text-align: left; } } /* ---- 3. Списки категорій у мобільному меню ------------------------ Той самий діагноз, що й у футері: контейнер #myLinks має `text-align: center`, а всі пункти — shrink-wrap'нуті , притиснуті ліворуч. Видно це лише на пункті, який переноситься у два рядки («Підшипники і підшипникова продукція») — його другий рядок центрується, і пункт випадає зі списку. Ціляємо тільки у випадайки категорій. Кнопки «Онлайн каталог» / «B2B кабінет» лежать в іншій гілці (.header__links-topline__prices) і лишаються центрованими. */ @media (max-width: 1023px) { #myLinks .category-mobile-menu .botline-drop__menu { text-align: left; } } /* ---- 4. Шапка вилазила за екран на вузьких телефонах -------------- `.header__menu-wrapper` має `width: 100%` (=320px) І `padding: 0 12px 0 16px` при `box-sizing: content-box` — разом 348px у viewport 320px. Блок висував по 14px з кожного боку, і оскільки він обрізається (а не скролиться), телефон і перемикач мов просто зникали за краєм. Той самий діагноз, що в .irbis-service-card вище: content-box + padding. */ .header__menu-wrapper { box-sizing: border-box; } /* ---- 5. Дві філії у мобільному меню випадали зі списку ------------ Перший (Харків) і останній (Львів) `li.branch-button` рахуються `display: block`, а решта 12 — `display: flex` з `flex-direction: column; align-items: center`. Через це 12 пунктів центровані, а ці два течуть ліворуч: у block-контексті flex-властивості не діють. Вирівнюємо всі 14 однаково — по більшості, тобто flex+center. */ @media (max-width: 1023px) { /* !important тут потрібен: ці два — рівно :first-child і :last-child свого