/* Мобильная адаптация страниц dc-экспорта.
   Вёрстка собрана на inline-стилях, поэтому переопределяем через селекторы
   по атрибуту style + !important — иначе inline выигрывает.
   Важно: dc-рантайм пересобирает style и браузер сериализует его с пробелом
   после двоеточия ("padding: 96px 32px"), а в исходнике он записан без
   пробела. Поэтому у правил по два селектора — на обе формы записи.
   Точки: 899px (совпадает с isMobile<900 в логике страниц) и 560px. */

/* Подсказка к 3D-сцене: мышь на десктопе, палец на тач-устройстве */
.az-hint-touch { display: none; }

/* ─────────────────────────  ≤ 899px  ───────────────────────── */
@media (max-width: 899px) {

  .az-hint-desktop { display: none !important; }
  .az-hint-touch { display: inline !important; }

  /* Крупные значения в блоках результата не должны переноситься по слогам */
  [style*="font-family: Unbounded"][style*="font-size: 26px"],
  [style*="font-family:'Unbounded'"][style*="font-size:26px"] { white-space: nowrap !important; }

  /* Грид-элементы по умолчанию не сжимаются уже своего min-content и
     распирают колонку наружу — снимаем это ограничение. */
  [style*="display: grid"] > *,
  [style*="display:grid"] > *,
  [style*="display: flex"] > *,
  [style*="display:flex"] > * { min-width: 0 !important; }

  /* Контейнеры: боковые поля 32 → 20 */
  [style*="max-width: 1280px"], [style*="max-width:1280px"],
  [style*="max-width: 1440px"], [style*="max-width:1440px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 96px 32px"], [style*="padding:96px 32px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 64px 32px 0"], [style*="padding:64px 32px 0"] { padding-top: 28px !important; }
  [style*="padding: 44px 32px"], [style*="padding:44px 32px"] { padding-top: 26px !important; padding-bottom: 26px !important; }
  [style*="padding: 14px 32px"], [style*="padding:14px 32px"] { padding-top: 10px !important; padding-bottom: 10px !important; }
  [style*="padding: 24px 32px 40px"], [style*="padding:24px 32px 40px"] { padding-top: 16px !important; }
  [style*="padding: 0px 32px 40px"], [style*="padding:0 32px 40px"] { padding-bottom: 24px !important; }

  /* Крупные auto-fit сетки — в одну колонку.
     Без этого minmax(460px,1fr) держит колонку шире экрана и режет контент. */
  [style*="minmax(460px"],
  [style*="minmax(440px"],
  [style*="minmax(400px"],
  [style*="minmax(380px"],
  [style*="minmax(360px"],
  [style*="minmax(340px"],
  [style*="minmax(320px"],
  [style*="minmax(300px"] { grid-template-columns: 1fr !important; }

  /* Мелкие сетки — минимум не шире экрана */
  [style*="minmax(268px"] { grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)) !important; }
  [style*="minmax(240px"] { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important; }
  [style*="minmax(220px"] { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
  [style*="minmax(200px"] { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important; }
  [style*="minmax(160px"] { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)) !important; }
  [style*="minmax(150px"] { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important; }

  /* Отступы, рассчитанные на широкий экран */
  [style*="gap: 64px"], [style*="gap:64px"] { gap: 32px !important; }
  [style*="gap: 56px"], [style*="gap:56px"] { gap: 30px !important; }
  [style*="gap: 48px"], [style*="gap:48px"] { gap: 28px !important; }
  [style*="gap: 36px"], [style*="gap:36px"] { gap: 20px !important; }
  [style*="margin-top: 64px"], [style*="margin-top:64px"] { margin-top: 36px !important; }

  /* Шапка */
  [style*="min-height: 78px"], [style*="min-height:78px"] { min-height: 60px !important; gap: 12px !important; }

  /* Герой: сцена с домом уезжала за экран — масштабируем её целиком */
  [style*="height: 600px"], [style*="height:600px"] { height: 400px !important; }
  .az-scene { transform: scale(.5); transform-origin: 50% 44%; }
  [style*="padding-bottom: 72px"], [style*="padding-bottom:72px"] { padding-bottom: 36px !important; }

  /* Карта и сертификаты — ниже */
  [style*="min-height: 420px"], [style*="min-height:420px"] { min-height: 260px !important; }
  [style*="min-height: 340px"], [style*="min-height:340px"] { min-height: 240px !important; }

  /* Модалка товара */
  [style*="z-index: 80"], [style*="z-index:80"] { padding: 12px !important; }
  [style*="padding: 34px 34px 30px"], [style*="padding:34px 34px 30px"] { padding: 22px 20px 24px !important; }

  /* Корзина */
  [style*="padding: 26px 28px"], [style*="padding:26px 28px"] { padding: 18px !important; }
  [style*="padding: 24px 28px"], [style*="padding:24px 28px"] { padding: 18px !important; }
  [style*="padding: 20px 28px"], [style*="padding:20px 28px"] { padding: 16px 18px !important; }

  /* Прайс-таблица калькулятора: 6 колонок не влезают — горизонтальный скролл */
  .az-price-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .az-price-table > div { min-width: 520px !important; }

  /* Строки «размер / цена / кол-во / удалить» в калькуляторе */
  [style*="1fr 1fr 90px 40px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 10px !important;
  }

  /* ── 3D-схема закреплена, пока заполняются поля ──────────────
     Схема объявлена sticky, но у грид-элемента область прилипания
     ограничена его же строкой, поэтому на одной колонке она сразу
     уезжала вверх. Во flex-контейнере элемент прилипает в пределах
     всего контейнера — и держится, пока прокручиваются поля.       */
  .az-calc-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* иначе от align-items:start блоки сожмутся по содержимому */
    gap: 16px !important;
  }

  .az-stage {
    position: sticky !important;
    top: 60px !important;  /* высота залипшей шапки */
    z-index: 40;           /* ниже шапки (60) и нижней навигации (70) */
  }

  /* Ужимаем закреплённую часть, чтобы под поля оставалось место */
  .az-stage-canvas { height: 190px !important; }

  /* Подписи поверх схемы: в низком холсте они наезжали на дом и друг на друга */
  .az-stage-label {
    font-size: 9.5px !important;
    letter-spacing: .1em !important;
    max-width: 45% !important;
    line-height: 1.35 !important;
  }
  .az-stage-hint {
    font-size: 11px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 10px !important;
  }

  .az-stage-totals { padding: 12px 14px !important; gap: 6px !important; }
  .az-stage-totals [style*="font-size: 26px"], .az-stage-totals [style*="font-size:26px"] { font-size: 19px !important; }
  .az-stage-totals [style*="font-size: 30px"], .az-stage-totals [style*="font-size:30px"] { font-size: 21px !important; }
  .az-stage-totals [style*="font-size: 14px"], .az-stage-totals [style*="font-size:14px"],
  .az-stage-totals [style*="font-size: 15px"], .az-stage-totals [style*="font-size:15px"] { font-size: 13px !important; }
  .az-stage-totals [style*="padding-top: 14px"], .az-stage-totals [style*="padding-top:14px"] { padding-top: 8px !important; }
}

/* ─────────────────────────  ≤ 560px  ───────────────────────── */
@media (max-width: 560px) {

  [style*="max-width: 1280px"], [style*="max-width:1280px"],
  [style*="max-width: 1440px"], [style*="max-width:1440px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="padding: 96px 32px"], [style*="padding:96px 32px"] { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Герой */
  [style*="height: 600px"], [style*="height:600px"] { height: 320px !important; }
  .az-scene { transform: scale(.38); transform-origin: 50% 42%; }

  /* Три метрики: ужимаем, чтобы «30 000 тг» не ломалось */
  .az-hero-stats [style*="font-size: 24px"],
  .az-hero-stats [style*="font-size:24px"] { font-size: 15px !important; white-space: nowrap !important; letter-spacing: -.01em !important; }
  .az-hero-stats > div { padding: 12px 9px !important; }
  .az-hero-stats [style*="font-size: 12px"],
  .az-hero-stats [style*="font-size:12px"] { font-size: 11px !important; line-height: 1.25 !important; }

  /* Кнопки героя — в колонку на всю ширину */
  .az-hero-cta { flex-direction: column !important; align-items: stretch !important; }
  .az-hero-cta > a { justify-content: center !important; }

  /* Поля калькулятора на главной — по одному в строку */
  [style*="gap: 22px"], [style*="gap:22px"] { grid-template-columns: 1fr !important; }

  /* Крупные числа */
  [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 26px !important; }
  [style*="font-size: 30px"], [style*="font-size:30px"] { font-size: 24px !important; }

  /* Футер — в колонку */
  [style*="padding: 44px 32px"], [style*="padding:44px 32px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Форма дилеров */
  [style*="min-width: 240px"], [style*="min-width:240px"] { min-width: 100% !important; }
  .az-dealer-form > button { width: 100% !important; }

  /* Модалка товара: цена и кнопка в колонку */
  .az-modal-buy { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .az-modal-buy > button { width: 100% !important; }
}