/* ═══════════════════════════════════════════════════════
   MARTBOX — mobile.css
   Подключается на все страницы после style.css
   Исправляет все мобильные проблемы
═══════════════════════════════════════════════════════ */

/* ─── БАЗОВЫЕ МОБИЛЬНЫЕ СБРОСЫ ─── */
@media (max-width: 767px) {

  /* Предотвращает горизонтальный скролл */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* ─── ШАПКА ─── */
  .hdr {
    padding: 0 16px;
    height: 60px;
  }
  :root { --hdr: 60px; }
  .logo { font-size: 18px; letter-spacing: .28em; }

  /* ─── МОБИЛЬНОЕ МЕНЮ ─── */
  .mob { padding: calc(60px + 16px) 16px 40px; }
  .mob-lnk { font-size: 18px; padding: 14px 0; }

  /* ─── HERO (главная) ─── */
  .hero { min-height: 92vh; }
  /* Brand hero pages don't need tall min-height */
  .hero:has(.hero-layout) { min-height: unset !important; }
  .hero-body {
    grid-template-columns: 1fr !important;
    padding: 0 16px clamp(100px,18vw,130px);
    gap: 16px;
  }
  .t-hero { font-size: clamp(44px,13vw,72px) !important; }
  .hero-label { font-size: 11px; }
  .hero-right {
    align-items: flex-start !important;
    gap: 16px;
  }
  .hero-desc {
    font-size: 15px !important;
    text-align: left !important;
  }
  .hero-dots { bottom: clamp(72px,12vw,100px); }

  /* Тикер */
  .ticker { padding: 12px 0; }
  .ticker-item { font-size: 12px; padding: 0 24px; }

  /* ─── INTRO ─── */
  .intro { padding: 48px 16px; }
  .intro-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .intro-num { font-size: 64px !important; }

  /* ─── СЕТКА 6 ПРОДУКТОВ ─── */
  .prod-grid-wrap,
  div[style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .prod-grid-card { aspect-ratio: 1/1 !important; }

  /* ─── КАРУСЕЛЬ ─── */
  .carousel-section { padding: 40px 0 48px; }
  .carousel-head { padding: 0 16px; margin-bottom: 24px; }
  .carousel-head .t-h2 { font-size: 26px; }
  .carousel-tabs { padding: 0 16px; }
  .tab-btn { font-size: 13px; padding: 10px 16px; }
  .carousel-slider { padding: 0 16px; }
  .carousel-slide { width: calc(82vw) !important; min-width: unset !important; }
  .cnav-info { display: none; }
  .carousel-nav { padding: 14px 16px 0; gap: 8px; }
  .carousel-nav .al { font-size: 12px; }

  /* ─── БРЕНДЫ (тайлы) ─── */
  .brand-grid-full { grid-template-columns: repeat(2,1fr) !important; }
  .brand-card { aspect-ratio: 3/2 !important; transition: none; }
  .brand-card:hover { flex: 1 !important; }

  /* ─── PAR БЛОК ─── */
  .par-block { grid-template-columns: 1fr !important; min-height: unset; }
  .par-photo { aspect-ratio: 4/3; }
  .par-text {
    padding: 40px 16px !important;
  }
  .par-title { font-size: 32px !important; }
  .par-badge { bottom: 16px; left: 16px; padding: 12px 16px; }

  /* ─── ПРОЕКТЫ ─── */
  .projs { padding: 48px 0; }
  .projs .wrap { padding: 0 16px; }
  .projs-grid4 { grid-template-columns: 1fr !important; }
  .proj-stack3 {
    grid-template-rows: unset !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .proj-cap { padding: 16px; }
  .proj-city { font-size: 10px; }

  /* ─── СТАТИСТИКА ─── */
  .stats { padding: 40px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-cell {
    padding: 24px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .stat-cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07) !important; }
  .stat-big { font-size: 40px !important; }

  /* ─── О КОМПАНИИ (about) — inline стили тоже перекрываем ─── */
  .about { padding: 48px 0; }
  #about .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #about .wrap > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #about .wrap > div:last-child > div:last-child > div:first-child {
    grid-template-columns: 1fr !important;
  }
  /* about values grid */
  .about-vals { grid-template-columns: 1fr !important; }
  .aval:nth-child(odd) {
    padding-right: 0 !important;
    border-right: none !important;
  }
  .aval:nth-child(even) { padding-left: 0 !important; }
  /* about photo */
  .about-img { aspect-ratio: 4/3 !important; }
  .about-badge { padding: 16px 20px; }
  .about-badge-n { font-size: 36px !important; }
  /* about values icons */
  #about [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── CTA ─── */
  .cta { padding: 48px 16px; }
  .cta::before { display: none; }
  .cta-title { font-size: 28px !important; }
  .cta-sub { font-size: 15px; margin-bottom: 28px; }
  .cta-btns { flex-direction: column; align-items: center; gap: 12px; }
  .btn-w, .btn-fill { width: 100%; max-width: 320px; text-align: center; }

  /* ─── FOOTER ─── */
  .ftr { padding: 40px 16px 0; }
  .ftr-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ftr-logo { font-size: 18px; }
  .ftr-btm { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ftr-legal { flex-wrap: wrap; gap: 12px; }

  /* ─── МОДАЛЬНАЯ ФОРМА ─── */
  #contactModal { padding: 12px; align-items: flex-end !important; }
  #contactModal > div {
    border-radius: 0 !important;
    max-height: 95vh !important;
    padding: 24px 16px !important;
  }
  /* форма 2 колонки → 1 колонка */
  #contactForm [style*="grid-template-columns:1fr 1fr"],
  #contactForm [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #contactForm [style*="grid-column:span 2"],
  #contactForm [style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* ─── HERO СТРАНИЦ БРЕНДОВ ─── */
  .hero-layout,
  .brand-hero-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .brand-title { font-size: clamp(38px,11vw,60px) !important; }
  .brand-stats { gap: 12px; }
  .stat-n { font-size: clamp(22px,7vw,34px) !important; }
  .hero { padding: 40px 16px 36px !important; margin-top: 60px !important; }
  .back { margin-bottom: 20px; }

  /* ─── КАТАЛОГ НА СТРАНИЦАХ БРЕНДОВ ─── */
  .catalog { padding: 24px 16px 60px; }
  .cat-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cat-top button { width: 100%; }

  /* фильтры */
  .filters-wrap, .filters { top: 60px; }
  .filters-row, .frow { padding: 0 8px; }
  .f-btn { font-size: 11px; padding: 14px 10px; }

  /* ─── СЕКЦИЯ ПРОИЗВОДСТВО (martbox-furniture) ─── */
  section[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── MARTBOX-SANTECH — PAR блок ─── */
  section[style*="grid-template-columns:1fr 1fr"].par-cta {
    grid-template-columns: 1fr !important;
  }
}

/* ─── ПЛАНШЕТЫ (768–1024) ─── */
@media (min-width: 768px) and (max-width: 1024px) {

  .hero-body { grid-template-columns: 1fr !important; }
  .hero-right { align-items: flex-start !important; }
  .hero-desc { text-align: left !important; }

  .brand-grid-full { grid-template-columns: repeat(4,1fr) !important; }
  .brand-card { aspect-ratio: 1/1 !important; }

  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stat-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .stat-cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07) !important; }

  .par-block { grid-template-columns: 1fr !important; }
  .par-photo { aspect-ratio: 16/9; }

  .ftr-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  .about-img { aspect-ratio: 16/9 !important; }
  #about .wrap > div:last-child { grid-template-columns: 1fr !important; }

  .carousel-slide { width: calc(48% - 2px) !important; }

  .proj-stack3 { grid-template-columns: 1fr 1fr !important; grid-template-rows: unset !important; }

  .hero-layout,
  .brand-hero-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ─── МЕЛКИЕ ТЕЛЕФОНЫ (< 380px) ─── */
@media (max-width: 380px) {
  .logo { font-size: 16px; letter-spacing: .2em; }
  .t-hero { font-size: 40px !important; }
  .brand-title { font-size: 34px !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-cell { border-right: none !important; }
  .proj-stack3 { grid-template-columns: 1fr !important; }
  .brand-grid-full { grid-template-columns: repeat(2,1fr) !important; }
  .carousel-slide { width: 90vw !important; }
  .cta-title { font-size: 24px !important; }
}

/* ─── TOUCH: убираем hover-эффекты ─── */
@media (hover: none) {
  .brand-card { transition: none; }
  .brand-card:hover { flex: 1 !important; }
  .card:hover { box-shadow: none; }
  .card:hover .card-img img { transform: none; }
  .al:hover { gap: 14px; }
  .al:hover::after { transform: scaleX(1); }
  .al:hover svg { transform: none; }
}

/* ─── ТОЧЕЧНЫЕ КЛАССЫ (добавлены к inline-стилям) ─── */
@media (max-width: 767px) {

  /* About section */
  .about-top-grid  { grid-template-columns: 1fr !important; gap: 24px !important; }
  .about-bottom-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .about-vals-grid { grid-template-columns: 1fr !important; }
  .about-vals-grid > div { border-right: none !important; padding-right: 0 !important; padding-left: 0 !important; }

  /* Modal form */
  .modal-form-grid { grid-template-columns: 1fr !important; }
  .modal-form-grid > div[style*="grid-column:span 2"] { grid-column: span 1 !important; }

  /* Production / Santech CTA sections */
  .prod-cta-section { grid-template-columns: 1fr !important; gap: 0 !important; padding: 40px 16px !important; }
  .prod-cta-section > div:last-child { grid-template-columns: repeat(2,1fr) !important; }
  .par-cta-section { grid-template-columns: 1fr !important; gap: 0 !important; padding: 40px 16px !important; }
  .par-cta-section > div:last-child { aspect-ratio: unset !important; padding: 32px 20px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .about-bottom-grid { grid-template-columns: 1fr !important; }
  .prod-cta-section { grid-template-columns: 1fr !important; gap: 32px !important; }
  .par-cta-section  { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* ─── НОВЫЙ РЯД ПРОЕКТОВ (3 колонки) ─── */
@media (max-width: 767px) {
  .projs [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .projs [style*="aspect-ratio:4/3"] {
    aspect-ratio: 4/3 !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .projs [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   READABILITY IMPROVEMENTS — dark background text
   All pages
═══════════════════════════════════════════════════════════ */

/* Footer text - all pages */
.ftr-tag { color: rgba(255,255,255,.55) !important; font-size:15px !important; }
.ftr-ht  { color: rgba(255,255,255,.35) !important; font-size:12px !important; }
.ftr-links a { color: rgba(255,255,255,.58) !important; font-size:16px !important; }
.ftr-contact { font-size:15px !important; color: rgba(255,255,255,.58) !important; line-height:2.1 !important; }
.ftr-contact a { color: rgba(255,255,255,.58) !important; }
.ftr-copy { color: rgba(255,255,255,.32) !important; font-size:13px !important; }
.ftr-legal a { color: rgba(255,255,255,.32) !important; font-size:13px !important; }
.ftr-soc { color: rgba(255,255,255,.45) !important; }

/* Dark hero sections */
.hero-desc { color: rgba(255,255,255,.88) !important; font-size:18px !important; }
.hero-label { color: rgba(255,255,255,.7) !important; font-size:13px !important; }
.brand-desc { color: rgba(255,255,255,.72) !important; font-size:16px !important; }
.stat-lbl { color: rgba(255,255,255,.62) !important; font-size:14px !important; }

/* PAR brand page */
.about-s-desc { color: rgba(255,255,255,.72) !important; font-size:17px !important; }
.about-s-list li { color: rgba(255,255,255,.72) !important; font-size:16px !important; }
.form-perks li { color: rgba(255,255,255,.75) !important; font-size:16px !important; }
.form-desc { color: rgba(255,255,255,.7) !important; font-size:17px !important; }

/* PAR specs */
.par-desc { color: rgba(255,255,255,.78) !important; }
.par-specs li { color: rgba(255,255,255,.82) !important; font-size:16px !important; }

/* Brand hero stats */
.stat-l { color: rgba(255,255,255,.42) !important; }
.brand-tag { color: rgba(255,255,255,.5) !important; }

/* CTA section */
.cta-sub { color: rgba(255,255,255,.62) !important; font-size:18px !important; }

/* Ticker */
.ticker-item { color: rgba(255,255,255,.82) !important; font-size:14px !important; }

/* B2B page */
.hero-body .t-h1 { color: #fff !important; }
.form-layout .eyebrow-w { color: rgba(255,255,255,.55) !important; }

/* Stats section */
.stat-big { color: #fff !important; }

/* Project captions */
.proj-brs { color: rgba(255,255,255,.72) !important; font-size:14px !important; }
.proj-city { font-size:12px !important; }
.proj-name { font-size: clamp(15px, 2vw, 22px) !important; }

/* Сarousel nav */
.cnav-info { font-size:14px !important; color: rgba(17,17,17,.65) !important; }

/* About section in index */
.about-text { font-size:17px !important; line-height:1.9 !important; }
.about-headline { font-size: clamp(19px,2.5vw,26px) !important; }

/* Body text universal improvement */
.t-body, .t-small { font-size:16px !important; }
.t-body-w { color: rgba(255,255,255,.82) !important; font-size:16px !important; }

/* ── MOBILE: bigger font sizes on small screens ── */
@media (max-width: 767px) {
  .hero-desc  { font-size:16px !important; }
  .brand-desc { font-size:15px !important; }
  .stat-big   { font-size:36px !important; }
  .ftr-links a{ font-size:15px !important; }
  .ftr-contact{ font-size:14px !important; }
  .about-text { font-size:15px !important; }
  .par-specs li { font-size:14px !important; }
  .form-perks li { font-size:14px !important; }
  .proj-name { font-size:15px !important; }

  /* Cards on mobile */
  .card-name { font-size:16px !important; }
  .ncard-name { font-size:18px !important; }
  .slide-name { font-size:16px !important; }

  /* hero sections */
  .brand-title { font-size: clamp(34px,9vw,56px) !important; }
}

/* ── MEGA MENU: prevent overflow on small screens ── */
@media (max-width: 767px) {
  .mega { min-width: 92vw !important; left: 4vw !important; transform: none !important; padding: 20px 16px !important; }
  .mega.open { transform: none !important; }
}

/* ── FOOTER: mobile readable ── */
@media (max-width: 767px) {
  .ftr-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ftr-btm { flex-direction: column; gap: 10px; }
  .ftr-legal { flex-wrap: wrap; gap: 16px; }
  .ftr-logo { font-size: 18px !important; }
  .ftr-socs { margin-bottom: 12px; }
  /* Requisites block */
  .ftr-top > div:first-child > div { padding: 14px 0 0; }
}

/* ── BRAND HERO on mobile ── */
@media (max-width: 767px) {
  .brand-stats { gap: 8px !important; }
  .brand-stats > div { padding: 8px 0; }
  .hero { padding: 36px 16px 32px !important; }
}

/* ── CATALOG FILTERS: bigger tap targets ── */
@media (max-width: 767px) {
  .f-btn { font-size: 12px !important; padding: 14px 12px !important; }
  .cat-nav-btn { font-size: 13px !important; padding: 16px 16px !important; }
  .tab-btn { font-size: 12px !important; padding: 10px 14px !important; }
}

/* ── CARD TEXT: mobile ── */
@media (max-width: 767px) {
  .card-name, .pcard-name { font-size: 15px !important; line-height: 1.35 !important; }
  .card-body, .pcard-body { padding: 14px 14px 10px !important; }
  .card-foot, .pcard-foot { padding: 10px 14px !important; }
  .slide-body { padding: 14px 14px 10px !important; }
  .ncard-info { padding: 16px 16px 18px !important; }
  .ncard-name { font-size: 17px !important; }
  .ncard-sub { font-size: 13px !important; }
}

/* ── PAR page sections ── */
@media (max-width: 767px) {
  .form-wrap { grid-template-columns: 1fr !important; }
  .fg { grid-template-columns: 1fr !important; }
  .ff.full { grid-column: span 1 !important; }
  .form-sec { padding: clamp(40px,6vw,72px) 16px !important; }
  .form-title { font-size: clamp(24px,7vw,34px) !important; }
}

/* ── B2B page ── */
@media (max-width: 767px) {
  .hero-body { gap: 20px !important; }
  .nums-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .num-big { font-size: clamp(32px,8vw,48px) !important; }
  .brands-list { grid-template-columns: 1fr 1fr !important; }
  .brand-b { padding: 20px 16px !important; }
  .brand-b-name { font-size: 15px !important; }
  .brand-b-disc { font-size: 20px !important; }
}

/* ── INDEX: about section values on mobile ── */
@media (max-width: 767px) {
  .aval-n { font-size: 11px !important; }
  .aval-d { font-size: 14px !important; }
}

/* ── CTA buttons: full width on mobile ── */
@media (max-width: 480px) {
  .cta-btns { flex-direction: column; align-items: stretch; }
  .btn-w, .btn-fill { text-align: center; padding: 16px 20px !important; }
}

/* ── MODAL on small phones ── */
@media (max-width: 480px) {
  #contactModal { padding: 0 !important; align-items: flex-end !important; }
  #contactModal > div { border-radius: 0 !important; max-height: 96vh !important; }
  #contactModal h3 { font-size: 20px !important; }
}

/* ── TABLET: 768-1024 ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .mega { min-width: 480px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .brand-grid-full { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ═══════════════════════════════════════════
   B2B PAGE — font readability fixes
═══════════════════════════════════════════ */
.for-list li   { font-size: 16px !important; color: rgba(17,17,17,.68) !important; }
.for-title     { font-size: 21px !important; }
.pstep-desc    { font-size: 15px !important; color: rgba(255,255,255,.72) !important; }
.pstep-title   { font-size: 18px !important; color: #fff !important; }
.num-lbl       { font-size: 14px !important; color: rgba(255,255,255,.58) !important; }
.case-desc     { font-size: 16px !important; color: rgba(17,17,17,.65) !important; }
.svc-desc      { font-size: 16px !important; color: rgba(17,17,17,.62) !important; }
.svc-title     { font-size: 19px !important; }
.brand-b-cats  { font-size: 15px !important; }
.for-link      { font-size: 13px !important; }

/* PAR — consent block */
#pdConsentPar + label { color: rgba(255,255,255,.88) !important; font-size: 13px !important; }

/* B2B mobile: process steps stack nicely */
@media (max-width: 767px) {
  .process-steps { grid-template-columns: 1fr 1fr !important; }
  .pstep-step    { padding: 24px 18px !important; }
  .pstep-desc    { font-size: 14px !important; }
  .for-list li   { font-size: 15px !important; }
  .for-card      { padding: 24px 20px !important; }
  .num-big       { font-size: clamp(34px,8vw,52px) !important; }
  .nums-grid     { grid-template-columns: 1fr 1fr !important; }
}


/* ─── FIX: Brand hero pages — убрать огромное чёрное поле ─── */
@media (max-width: 767px) {
  /* Страницы брендов: hero с hero-layout (не index hero-body) */
  .hero:has(.hero-layout) {
    min-height: unset !important;
    padding: 36px 16px 40px !important;
  }
  /* Фильтры сразу после hero */
  .filters-wrap { top: 60px !important; }
  
  /* Каталог на мобиле — 2 колонки */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }
  
  /* Карточки — текст не съезжает */
  .card {
    display: flex !important;
    flex-direction: column !important;
  }
  .card-img {
    aspect-ratio: 1/1 !important;
    width: 100% !important;
  }
  .card-body {
    padding: 12px !important;
    flex: 1 !important;
  }
  .card-foot {
    padding: 10px 12px !important;
  }
  .card-name {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .card-brand {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .card-type {
    font-size: 12px !important;
  }
}

/* ── PRODUCT PAGE: fix title overlap on mobile ── */
@media (max-width: 767px) {
  .prod-gal { margin-bottom: 12px !important; }
  .prod-name, .prod-title { 
    position: static !important; 
    margin-top: 16px !important;
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  .gal-wrap { margin-bottom: 8px !important; }
  .gal-thumbs { margin-top: 8px !important; }
  .prod-info { padding-top: 16px !important; }
}