/* =========================================================
   Mets Dress — мобильные улучшения и каталог
   Эти правила переопределяют/дополняют style.css
   ========================================================= */

/* ── Базовые улучшения touch-устройств ── */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* ── Контейнер: меньший padding на мобиле ── */
@media (max-width:480px){
  .container{ padding:0 16px; }
}

/* ═══════════════════════════════════════════
   ХЕДЕР
═══════════════════════════════════════════ */
@media (max-width:900px){
  :root{ --header-h: 70px; }
  .brand img{ height:34px; }
  .brand-name{ font-size:1rem; }
  .brand-name span{ font-size:.54rem; }
  .header-tools{ gap:10px; }
  .icon-btn{ width:38px; height:38px; }
  .lang-current{ padding:7px 10px; font-size:.78rem; }
}

/* ── Мобильное меню: чуть больше иконки и красивее закрытие ── */
@media (max-width:900px){
  .main-nav{
    padding:40px 24px 30px;
    gap:0;
  }
  .main-nav a{
    font-size:1.35rem;
    padding:14px 0;
    border-bottom:1px solid var(--cream-line);
    width:100%;
    display:flex;
    align-items:center;
  }
  .main-nav a:last-child{ border-bottom:none; }
}

/* ═══════════════════════════════════════════
   ГЛАВНАЯ — герой
═══════════════════════════════════════════ */
@media (max-width:480px){
  .hero{ padding:80px 20px 60px; min-height:92vh; }
  .hero-logo{ width:200px; margin-bottom:20px; }
  .hero-headline{ font-size:.72rem; letter-spacing:.04em; }
  .hero-text{ font-size:.72rem; margin-top:10px; }
  .hero-actions{ margin-top:28px; }
  .hero .btn-primary{ padding:14px 28px; font-size:.85rem; }
}

/* ═══════════════════════════════════════════
   СЕКЦИИ — отступы на мобиле
═══════════════════════════════════════════ */
@media (max-width:620px){
  .section{ padding:52px 0; }
  .section-head{ margin-bottom:28px; }
  .section-title{ font-size:1.6rem; }
  .page-hero{ padding:36px 0 18px; }
}

/* ═══════════════════════════════════════════
   КАТАЛОГ — СЕТКА КОЛЛЕКЦИЙ
═══════════════════════════════════════════ */
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
@media (max-width:600px){
  .grid-2{ grid-template-columns:1fr; gap:16px; }
}

.collection-cover{ aspect-ratio:3/2; }
.collection-body{ padding:16px 18px 20px; }
.collection-body h3{ font-size:1.1rem; }

/* ═══════════════════════════════════════════
   КАТАЛОГ — СЕТКА МОДЕЛЕЙ (главное улучшение)
═══════════════════════════════════════════ */

/* Десктоп: 3 колонки с крупными карточками */
#modelsGrid.grid-3{
  grid-template-columns: repeat(3,1fr);
  gap:22px;
}

/* Планшет (768-1024px): 2 большие колонки */
@media (max-width:1024px){
  #modelsGrid.grid-3{
    grid-template-columns: repeat(2,1fr);
    gap:18px;
  }
}

/* Мобильный (< 640px): 2 колонки компактно */
@media (max-width:640px){
  #modelsGrid.grid-3{
    grid-template-columns: repeat(2,1fr);
    gap:10px;
  }
}

/* Очень маленький (< 380px): 1 колонка */
@media (max-width:380px){
  #modelsGrid.grid-3{
    grid-template-columns: 1fr;
    gap:14px;
  }
}

/* Карточка модели: высокое фото, компактный текст */
.model-card{ border-radius:10px; }
.model-media{ aspect-ratio:2/3; }  /* Вертикальный формат — лучше для платьев */
.model-body{ padding:12px 14px 16px; gap:4px; }
.model-body h4{ font-size:.9rem; font-weight:600; }
.model-more{
  font-size:.72rem; margin-top:8px;
  padding:7px 0; width:100%; text-align:center;
  background:var(--cream-deep); border-radius:6px;
  text-decoration:none; color:var(--sage-dark);
}

/* Сердечко: чуть больше на мобиле для удобного тапа */
@media (max-width:640px){
  .fav-toggle{ width:34px; height:34px; top:8px; right:8px; }
  .fav-toggle svg{ width:15px; height:15px; }
}

/* Страница избранного — тоже 2 колонки на мобиле */
@media (max-width:640px){
  #favoritesGrid.grid-3{
    grid-template-columns: repeat(2,1fr);
    gap:10px;
  }
}

/* ═══════════════════════════════════════════
   МОДАЛЬНОЕ ОКНО — полноэкранное на мобиле
═══════════════════════════════════════════ */
@media (max-width:640px){
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-card{
    grid-template-columns:1fr;
    border-radius:20px 20px 0 0;
    max-height:94vh;
    max-width:100%;
    width:100%;
  }
  .modal-media{
    min-height:260px;
    max-height:42vw;
    border-radius:20px 20px 0 0;
  }
  .modal-info{ padding:20px 20px 32px; }
  .modal-info h3{ font-size:1.2rem; }
  .modal-close{ top:12px; right:12px; }
  .modal-sizes{ gap:6px; }
  .modal-sizes span{ padding:4px 9px; font-size:.72rem; }
}

/* Попап подборки — тоже bottom sheet на мобиле */
@media (max-width:640px){
  .selection-card{
    border-radius:20px 20px 0 0;
    max-height:94vh;
    max-width:100%;
    width:100%;
  }
}

/* ═══════════════════════════════════════════
   О НАС
═══════════════════════════════════════════ */
@media (max-width:900px){
  .about-grid{ gap:32px; }
  .about-visual{ aspect-ratio:16/9; }
  .fact-row{ gap:12px; margin-top:24px; }
  .fact-row div b{ font-size:1.4rem; }
}
@media (max-width:480px){
  .fact-row{ grid-template-columns:1fr 1fr; }
}

/* ═══════════════════════════════════════════
   КОНТАКТЫ
═══════════════════════════════════════════ */
@media (max-width:900px){
  .contacts-grid{ gap:24px; }
  .form-card{ padding:24px 20px; }
}
@media (max-width:560px){
  .field-row{ grid-template-columns:1fr; gap:0; }
  .social-row{ flex-wrap:wrap; gap:8px; }
  .social-pill{ font-size:.78rem; padding:9px 14px; }
}

/* ═══════════════════════════════════════════
   КНОПКИ — минимум 44px для touch
═══════════════════════════════════════════ */
@media (max-width:640px){
  .btn{ min-height:44px; }
  .btn-sm{ min-height:38px; }
}

/* ═══════════════════════════════════════════
   ФУТЕР
═══════════════════════════════════════════ */
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-about{ grid-column:1/-1; }
  .site-footer{ padding-top:44px; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:22px; }
  .footer-about p{ max-width:100%; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:8px; }
}

/* ═══════════════════════════════════════════
   CTA-БЛОК
═══════════════════════════════════════════ */
@media (max-width:780px){
  .cta-band{ flex-direction:column; padding:36px 28px; text-align:center; }
  .cta-band h2{ max-width:none; }
  .cta-band p{ max-width:none; }
}

/* ═══════════════════════════════════════════
   КАРТОЧКИ ПРЕИМУЩЕСТВ на главной
═══════════════════════════════════════════ */
@media (max-width:640px){
  .grid-4{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .value-card{ padding:20px 16px; }
  .value-icon{ width:40px; height:40px; margin-bottom:12px; }
  .value-card h3{ font-size:.95rem; }
  .value-card p{ font-size:.82rem; }
}

/* ═══════════════════════════════════════════
   ИНФО-СТРАНИЦЫ (FAQ, How to order и т.п.)
═══════════════════════════════════════════ */
@media (max-width:640px){
  .step-item{ gap:12px; padding:18px 0; }
  .step-num{ font-size:1.3rem; width:36px; }
  .reason-item{ gap:12px; }
  .faq-q{ font-size:.9rem; }
  .info-article h2{ font-size:1.2rem; }
  .delivery-table{ font-size:.82rem; }
  .delivery-table th, .delivery-table td{ padding:10px 8px; }
}

/* ═══════════════════════════════════════════
   СГЛАЖИВАНИЕ — убираем hover-эффекты на touch
═══════════════════════════════════════════ */
@media (hover:none){
  .model-card:hover{ transform:none; box-shadow:var(--shadow-card); }
  .collection-card:hover{ transform:none; box-shadow:var(--shadow-card); }
  .btn:hover{ transform:none; }
  .model-media:hover img{ transform:none; }
}