/* ════════════════════════════════════════════════════════════
   mobile.css — DermLab · зручність на телефоні
   Підключається ОСТАННІМ у <head> кожної сторінки (після style.css).
   Працює лише на вузьких екранах, десктоп не змінює.
   ════════════════════════════════════════════════════════════ */

/* Смуга категорій під шапкою прибрана на всіх сторінках (ПК і телефон) */
.cat-nav { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
body { overflow-x: hidden; }
a, button, label, input, select, textarea { -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {

  /* ── Верхня смужка: один рядок, що гортається, а не 3 рядки ── */
  .topbar { padding: 6px 0; font-size: 12px; }
  .topbar__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .topbar__inner::-webkit-scrollbar { display: none; }
  .topbar__inner span { flex: 0 0 auto; }

  /* ── Шапка: логотип + іконки в один рядок ─────────────────── */
  .header__inner {
    padding-left: 14px;
    padding-right: 14px;
    gap: 8px;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
    row-gap: 8px;
  }
  .logo { min-width: 0; }
  .logo__mark { width: 32px; height: 32px; }
  .logo__name { font-size: 21px; white-space: nowrap; }
  .header__actions { gap: 6px; flex-shrink: 0; }
  .action-btn, .search-toggle-btn { width: 44px; height: 44px; }
  .header-admin-link { padding: 10px; }
  .header-admin-link span { display: none; }
  #header-auth-slot { display: inline-flex; align-items: center; gap: 6px; }
  #auth-btn { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
  .search__input { font-size: 16px; padding: 12px 16px 12px 42px; } /* iOS не зумить */
}

@media (max-width: 380px) {
  .logo__name { font-size: 19px; }
  .header__inner { padding-left: 10px; padding-right: 10px; }
}

/* ── Каталог ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .catalog__header { align-items: flex-end; }
  .catalog__title { font-size: 1.5rem; line-height: 1.2; }
  .catalog__meta { font-size: 12.5px; white-space: nowrap; }

  /* картка: компактна, ціна й кнопка завжди видно повністю */
  .product-card__price-wrap { gap: 2px 8px; }
  .product-card .btn--buy { min-height: 42px; }
  .product-card__wish { width: 40px; height: 40px; }

  /* кнопка «Фільтри» — на всю доступну ширину, зручна для пальця */
  .filters-toggle { min-height: 44px; }

  /* вкладки сортування: червона «Знижки» не обрізається */
  .sort-tabs__btn { min-height: 40px; }

  /* порожній стан і лоадер */
  .state-loader, .state-error { padding: 32px 12px; }
}

/* Шухляд фільтрів: на весь екран по висоті, з урахуванням «чубчика» й панелі жестів */
@media (max-width: 900px) {
  .filters {
    width: min(92vw, 380px);
    padding-top: env(safe-area-inset-top, 0px);
    height: 100%;
    height: 100dvh;
  }
  .filters__head { position: sticky; top: 0; background: var(--c-surface); z-index: 2; }
  .filters__scroll { -webkit-overflow-scrolling: touch; }
}

/* ── Кошик-тост, чат: не перекривають кнопки ──────────────── */
@media (max-width: 768px) {
  .dl-toast {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    text-align: center;
  }
  #dl-chat-btn {
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
  }
  #dl-chat-window {
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 130px) !important;
  }
  #dl-chat-window input, #dl-chat-window textarea { font-size: 16px !important; }
}

/* ── Підвал ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer__inner { flex-direction: column; gap: 28px; padding-left: 18px; padding-right: 18px; }
  .footer__cols { flex-direction: row; flex-wrap: wrap; gap: 24px 32px; }
  .footer__col { min-width: 140px; }
  .footer__col a { display: inline-block; padding: 5px 0; }
  .footer__bottom { flex-direction: column; gap: 6px; text-align: center; padding-left: 16px; padding-right: 16px; }
}

/* ── Секція інгредієнтів ──────────────────────────────────── */
@media (max-width: 768px) {
  .ingredients__inner { padding-left: 16px; padding-right: 16px; }
  .ingredients__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 480px) {
  .ingredients__grid { grid-template-columns: 1fr; }
}

/* ── Форми: 16px у полях (iOS не збільшує сторінку) + зручні поля ── */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  select, textarea,
  .field__input, .form-input, .co-input, .co-select {
    font-size: 16px !important;
    min-height: 44px;
  }
  .btn, .btn-submit, .co-btn, .success-btn { min-height: 46px; }
}

/* ── Сторінка товару ──────────────────────────────────────── */
@media (max-width: 768px) {
  .breadcrumb { padding-left: 14px; padding-right: 14px; font-size: 12.5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .pv-page { padding: 10px 12px 48px; }
  .pv-card { padding: 16px; }
  .pv-gallery { padding: 10px; }
  .pv-gallery__stage { height: 82vw; max-height: 440px; }
  .pv-buttons { grid-template-columns: 1fr; }
  .pv-buttons .btn, .pv-buttons button { min-height: 48px; font-size: 15px; }
  .pv-specs { grid-template-columns: 1fr; gap: 2px 0; }
  .pv-specs dt { margin-top: 10px; }
}

/* ── Кошик ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .cart-item { gap: 12px; padding: 12px; }
  .cart-layout { gap: 18px; }
}

/* ── Оформлення замовлення ────────────────────────────────── */
@media (max-width: 820px) {
  .co-steps { overflow-x: auto; scrollbar-width: none; }
}

/* ── Профіль: таблиці/списки замовлень не розпирають екран ── */
@media (max-width: 768px) {
  .profile-wrap table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Скорочена анімація, якщо користувач так налаштував ───── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}