/* =====================================================================
   ВЕРСИЯ ДЛЯ ТЕЛЕФОНОВ (экраны до 768px). Подключается последним на всех страницах.
   ===================================================================== */
@media (max-width: 768px) {

  /* ---------- Шапка: логотип слева, корзина и профиль справа, поиск на всю ширину ---------- */
  .topbar__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo icons" "search search";
    align-items: center;
    gap: 10px 12px;
    height: auto !important;
    padding: 10px 14px 12px !important;
    position: relative;
  }
  .topbar .logo {
    grid-area: logo;
    font-size: 22px !important;
    text-align: left;
    white-space: nowrap;
    line-height: 1.25 !important;  /* чтобы не обрезалась «й» */
  }
  .topbar__icons {
    grid-area: icons;
    position: static !important;
    gap: 6px !important;
  }
  .icon-btn { width: 40px; height: 40px; }
  .topbar .search {
    grid-area: search;
    width: 100%;
    margin: 0 !important;
    justify-content: stretch !important;
  }
  .site-search-input {
    width: 100% !important;
    height: 42px;
    font-size: 16px;               /* 16px — iPhone не приближает страницу при вводе */
    border-radius: 8px;
    box-sizing: border-box;
  }

  /* ---------- Главная: каталог в 2 колонки, карточки тянутся по ширине ---------- */
  .products { padding: 16px 12px 28px !important; }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    justify-content: stretch !important;
  }
  .card__img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 195 / 261;       /* те же пропорции, что у фото товаров */
  }
  .card__subtitle { width: 100% !important; }
  .buy-btn { height: 40px; border-radius: 8px; }          /* удобнее нажимать пальцем */

  /* ---------- Страница товара: большое фото сверху, всё в одну колонку ---------- */
  .product-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .product-photo {
    width: 100% !important;
    max-width: none !important;
  }
  .product-photo img { width: 100%; height: auto; }
  .buy-card {
    grid-column: auto !important;  /* раньше карточка покупки занимала «вторую колонку» и сжимала фото до нуля */
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  .buy-card__button { height: 46px; font-size: 15px; }    /* удобнее нажимать пальцем */
  .product-title { font-size: 20px; line-height: 1.2; }
  .reviews-title { font-size: 28px; }

  /* Редактор товара */
  .pe-photo { height: auto !important; aspect-ratio: 496 / 661; }
  .pe-title { font-size: 20px; }
  .pe-input--tag { width: 100%; }

  /* ---------- Корзина: картинка пустой корзины не вылезает за экран ---------- */
  .empty-cart { padding: 24px 16px 0; box-sizing: border-box; }
  .empty-cart__visual {
    width: 220px !important;
    height: 180px !important;
    margin: 0 auto 28px !important;
  }
  .empty-cart__cart { width: 196px !important; right: 0 !important; }
  .empty-cart__cloud { width: 150px !important; left: 0 !important; top: -8px !important; }
  .empty-cart__title { font-size: 22px; }
  .empty-cart__text { font-size: 15px; }
  .empty-cart__button { min-width: 0 !important; width: 100%; max-width: 320px; }

  /* ---------- Профиль ---------- */
  .profile-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .profile-title { font-size: 24px; }
}

/* Совсем узкие телефоны */
@media (max-width: 360px) {
  .topbar .logo { font-size: 19px !important; }
  .grid { gap: 16px 10px !important; }
  .card__subtitle { font-size: 11px; }
}