/* ===== MOBILE OVERRIDES (<= 768px) ===== */
@media (max-width: 768px){

  /* Базовая типографика и отступы */
  html { font-size: 15px; }
  body { line-height: 1.45; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Заголовки секций как в макете */
  h1, .h1, h2, .h2 { letter-spacing: .2px; }

  /* HERO/первый экран: крупный заголовок, кнопки в столбик, картинка ниже */
  .hero, .header-hero, .site-hero, .front-hero { 
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  .hero__content, .header-hero__content { order: 1; text-align: left; }
  .hero__media, .header-hero__media { order: 2; }
  .hero img, .header-hero img { width: 100%; height: auto; }

  .btn, .button, .wp-block-button__link {
    width: 100% !important;
    display: inline-flex;
    justify-content: center;
    padding: 14px 18px;
    font-weight: 700;
  }
  .btn + .btn, .button + .button { margin-top: 10px; }

  /* Карточки каталога/плитки: в один столбец, полноширинные */
  .grid, .cards, .tiles, .catalog-grid, .uiblock__banners {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .card, .tile, .ui-item, .ui-banner, .uiblock--banner { width: 100% !important; }

  /* Акции / расчет: одинаковая высота, аккуратные отступы */
  .promo, .calc, .uiblock--banner .panel, .panel {
    padding: 18px !important;
    min-height: 120px;
  }

  /* Блок «Есть вопросы?» — кнопка на всю ширину, текст компактнее */
  .cta, .callout, .questions {
    padding: 18px !important;
  }
  .cta .btn, .callout .btn, .questions .btn { width: 100% !important; }