/* js-safelist.css — 2026-07-19
 *
 * НАВІЩО: tailwind.min.css зібраний з очищенням невикористаних класів. Збірник
 * сканує PHP-шаблони, але НЕ бачить класи, які збираються всередині JS-рядків
 * (favorites.js, script.js). Такі класи мовчки зникають зі стилів.
 *
 * НАСЛІДОК, ЯКИЙ ЦЕ СПРИЧИНИЛО: у блоці «Нещодавно переглянуті» не було .w-40 і
 * .h-36 — картка втратила обмеження ширини, а фото висоти, і двері розтягувались
 * на весь екран. Знайдено власницею на живому сайті.
 *
 * Файл підключається ПІСЛЯ tailwind.min.css і лише доповнює відсутні утиліти.
 * Значення — стандартні з Tailwind, нічого не вигадано.
 */
.w-40   { width: 10rem; }
.h-36   { height: 9rem; }
.p-1    { padding: .25rem; }
.mt-1\.5{ margin-top: .375rem; }
.pt-1\.5{ padding-top: .375rem; }
.px-1\.5{ padding-left: .375rem; padding-right: .375rem; }
.py-0\.5{ padding-top: .125rem; padding-bottom: .125rem; }
.py-2\.5{ padding-top: .625rem; padding-bottom: .625rem; }
.-mt-1  { margin-top: -.25rem; }
.-mr-1  { margin-right: -.25rem; }
.text-\[10px\] { font-size: 10px; line-height: 1.2; }

/* ── Плаваючі кнопки не мають накладатись (2026-07-19) ──────────────────
 * На мобільному в правому нижньому куті опинялись ДВІ кнопки одночасно:
 * зв'язок (bottom-20 right-4 z-55, телефони + Telegram) і чат (z-9990).
 * Чат перекривав зв'язок, тобто клієнт фізично не міг подзвонити.
 * На десктопі конфлікту немає — там зв'язок їде вліво (md:left-8).
 * Ставимо їх стовпчиком: зв'язок над чатом, обидва слідують за липкою
 * панеллю «Купити» через ту саму змінну --doai-bottom.
 */
@media (max-width: 767px) {
  .fixed.bottom-20.right-4.z-\[55\] {
    bottom: calc(var(--doai-bottom, 20px) + 76px) !important;
  }
}

/* ── <picture> НЕ має брати участь у розкладці ──────────────────────────
 * ЩО БУЛО: у сітках картинка лежить у flex-контейнері з фіксованою висотою
 * (h-56, h-48, h-40, aspect-square), а на <img> висить max-h-full / h-full.
 * Коли <img> загорнули в <picture> заради webp, flex-елементом став САМЕ
 * <picture>. Відсоткова висота всередині нього рахується від висоти auto,
 * тобто не діє взагалі — картинка розтягувалась на всю ширину і вилазила
 * по висоті, а overflow-hidden зрізав верх і низ.
 * Заміряно на «Схожі моделі»: контейнер 230x224, зображення 230x498 —
 * двері виглядали розплющеними, бо видно було лише широку середину.
 * display:contents прибирає власну коробку <picture>, і <img> знову стає
 * flex-елементом — усі рідні класи Tailwind працюють як задумано.
 * ВАЖЛИВО: <picture> не має власної семантики, тож для доступності це безпечно.
 */
picture{display:contents}