/* ============================================================
   FLEXYPRO AI — Universal responsive overrides
   Apple HIG · touch targets >= 48px · fluid type · safe areas
   Order matters: this file should be linked LAST.
   ============================================================ */

/* === A0. Global no horizontal scroll + safe-area variables === */
html, body { overflow-x: hidden; max-width: 100vw; }
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Always-on momentum scroll on iOS */
body { -webkit-overflow-scrolling: touch; }

/* Prevent every image / video / iframe from blowing layout */
img, video, iframe, svg { max-width: 100%; }

/* === A1. Reduced motion: kill marquees, parallax === */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .hero-orb,
  .bar-shimmer,
  .skel-block,
  .consultant-msg--typing span,
  .chat-msg--typing span,
  .chat-fab__pulse,
  .consultant-fab__pulse,
  .dock__dot { animation: none !important; }
}

/* === A2. Marquee on mobile: slower so не дёргается === */
@media (max-width: 880px) {
  .marquee__track { animation-duration: 60s !important; }
  .marquee::before, .marquee::after { width: 64px !important; }
}

/* ============================================================
   B. TOPBAR / HEADER — fullscreen mobile dropdown
   ============================================================ */

/* Safe-area on the fixed/sticky top bars */
header.topbar,
header.border-b {
  padding-top: max(16px, calc(var(--sat) + 8px));
  padding-left: max(16px, var(--sal));
  padding-right: max(16px, var(--sar));
}

/* Pull headers above content — z-index sanity */
header.topbar { z-index: 60; }
.topbar.solid { padding-top: max(14px, calc(var(--sat) + 6px)); }

/* Hamburger always visible at mobile / on every page */
.hamburger-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
}
@media (max-width: 880px) {
  .hamburger-btn { display: inline-flex !important; }
}
.hamburger-btn svg { width: 22px !important; height: 22px !important; }

/* Mobile dropdown for both `.nav-links` and `.topbar__nav` */
@media (max-width: 880px) {
  .nav-links,
  .topbar__nav { display: none !important; }
  .nav-links.open,
  .topbar__nav.open {
    display: flex !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column !important;
    background: rgba(8,7,7,0.96);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid rgba(245,241,237,0.06);
    border-bottom: 1px solid rgba(245,241,237,0.06);
    padding: 8px 0 calc(8px + var(--sab)) 0 !important;
    gap: 0 !important;
    z-index: 60;
  }
  .nav-links.open a,
  .nav-links.open button,
  .nav-links.open span,
  .topbar__nav.open a,
  .topbar__nav.open button {
    min-height: 48px;
    display: flex !important;
    align-items: center;
    padding: 12px 24px !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(245,241,237,0.05);
    text-align: left;
    white-space: nowrap;
  }
  .nav-links.open a:last-child,
  .nav-links.open button:last-child,
  .topbar__nav.open a:last-child { border-bottom: 0; }

  header { position: relative; }
  header.topbar { position: fixed; }
}

/* Landing/about topbar — show hamburger and hide nav at <880 */
.topbar .hamburger-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(245,241,237,0.12);
  color: #f5f1ed;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.topbar .hamburger-btn svg { stroke: #f5f1ed; }
@media (max-width: 880px) {
  .topbar .hamburger-btn { display: inline-flex; }
}

/* CTA in topbar — make tappable */
.topbar__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 600px) {
  .topbar__cta { padding: 10px 14px !important; font-size: 13px !important; }
}
/* На очень узких — прячем CTA в шапке, чтобы гамбургер не давил логотип */
@media (max-width: 460px) {
  .topbar__cta { display: none !important; }
}

/* ============================================================
   C. HERO — стек на мобиле, SQUARE before/after, kill 100vh
   ============================================================ */

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .hero__text {
    padding: calc(96px + var(--sat)) clamp(20px, 5vw, 32px) clamp(40px, 8vw, 56px) !important;
    gap: 24px !important;
  }
  .hero__visual {
    order: -1 !important;
    aspect-ratio: 1/1 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .ba {
    min-height: 0 !important;
    height: 100% !important;
    aspect-ratio: 1/1;
  }
  .ba__caption {
    bottom: 16px !important; left: 16px !important; right: 16px !important;
    font-size: 11px !important; padding: 10px 14px !important;
  }
  .ba__sides { padding: 0 16px !important; top: 16px !important; }
  .ba__handle-dot { width: 44px !important; height: 44px !important; }
}

@media (max-width: 600px) {
  .hero__h { font-size: clamp(34px, 9vw, 48px) !important; line-height: 1.0 !important; max-width: 100% !important; }
  .hero__sub { font-size: 15px !important; line-height: 1.55 !important; }
}

@media (max-width: 380px) {
  .hero__h { font-size: clamp(28px, 8vw, 36px) !important; }
}

/* CTA buttons on mobile — full-width with min-height 52px */
.cta-primary,
.cta-secondary {
  min-height: 52px;
  align-items: center;
}
@media (max-width: 600px) {
  .hero__ctas { width: 100%; gap: 12px !important; }
  .hero__ctas .cta-primary,
  .hero__ctas .cta-secondary {
    width: 100%;
    justify-content: center;
    padding: 16px 22px !important;
    font-size: 15px !important;
  }
}

/* ICP chips — bigger on mobile */
@media (max-width: 600px) {
  .icp { gap: 8px !important; }
  .icp__chip {
    min-height: 40px;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   D. SECTION padding / typography on mobile
   ============================================================ */
@media (max-width: 600px) {
  section.s { padding: clamp(48px, 12vw, 80px) clamp(16px, 5vw, 24px) !important; }
  .s__head { margin-bottom: 32px !important; }
  .s__h, .hero__h em { letter-spacing: -0.025em; }

  /* About page hero / section */
  .hero { padding: clamp(108px, 28vw, 160px) 20px clamp(40px, 8vw, 64px) !important; }
  .hero__h { font-size: clamp(34px, 9vw, 56px) !important; }
  .hero__sub { font-size: 16px !important; }

  .ctablock { padding: clamp(64px, 14vw, 120px) 20px !important; }
  .ctablock__h { font-size: clamp(32px, 9vw, 52px) !important; line-height: 1.06 !important; }
  .ctablock__sub { font-size: 15px !important; }

  .manifesto { font-size: clamp(24px, 7.5vw, 36px) !important; line-height: 1.2 !important; }
}

/* ============================================================
   E. GRIDS — stats / steps / cases / cabinet / case-mini-grid
   ============================================================ */

/* Stats: 4 → 2 on tablet, 1 on smallest */
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stats__cell { padding: 24px 18px !important; gap: 8px !important; }
  .stats__num { font-size: clamp(28px, 9vw, 40px) !important; }
  .stats__lbl { font-size: 10px !important; letter-spacing: 0.14em !important; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stats__cell { padding: 20px 14px !important; }
}

/* Steps / pillars: 1col mobile */
@media (max-width: 880px) {
  .steps, .pillars { grid-template-columns: 1fr !important; }
  .step, .pillar { min-height: 0 !important; padding: 28px 22px !important; }
}

/* Cases: stack, 16/10 image, ICP chips wrap nicely */
@media (max-width: 600px) {
  .case { grid-template-columns: 1fr !important; gap: 24px !important; padding: 40px 0 !important; }
  .case__img { aspect-ratio: 4/5 !important; }
  .case__name { font-size: clamp(26px, 8vw, 36px) !important; }
  .case__meta { grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; }
  .case__body { gap: 18px !important; padding-bottom: 8px !important; }
  .case__quote { font-size: 15px !important; }
}

/* Cabinet stats: 2-col on mobile */
@media (max-width: 600px) {
  main > section.grid.grid-cols-2 { gap: 12px !important; }
}

/* ============================================================
   F. FOOTER — collapse to 1-2 cols on mobile
   ============================================================ */
@media (max-width: 700px) {
  footer.f { grid-template-columns: 1fr 1fr !important; gap: 28px !important; padding: 48px 20px calc(32px + var(--sab)) !important; }
}
@media (max-width: 480px) {
  footer.f { grid-template-columns: 1fr !important; gap: 24px !important; padding: 40px 20px calc(28px + var(--sab)) !important; }
  .f__bottom { flex-direction: column; gap: 8px; padding-top: 24px !important; }
}

/* ============================================================
   G. CATALOG / GALLERY / STUDIO GALLERY
   ============================================================ */

/* Sticky filter bar — собрать в колонку при узком */
@media (max-width: 720px) {
  .sticky-bar .sticky-inner { gap: 10px !important; padding: 12px 0 !important; }
  .sticky-bar .divider-v { display: none; }
  .sticky-bar .search {
    min-width: 0 !important;
    width: 100%;
    height: 44px !important;
  }
  .sticky-bar .search input { font-size: 15px !important; }
  .sticky-bar .pill-group { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .sticky-bar .pill { min-height: 40px; padding: 10px 14px !important; font-size: 13px !important; }
  .sticky-bar .results-meta { width: 100%; margin-left: 0 !important; }
}

/* Cards / SKU grid — comfortable on phones */
@media (max-width: 600px) {
  .grid-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .card .meta { padding: 12px 12px 14px !important; }
  .card .sku { font-size: 13px !important; }
  .card .cat-tag { font-size: 9px !important; }
}
@media (max-width: 380px) {
  .grid-cards { grid-template-columns: 1fr !important; }
}

/* Rail cards (catalog) horizontal pill scroll — comfortable touch */
@media (max-width: 720px) {
  .rail-card { min-width: 156px !important; padding: 14px 16px !important; }
}

/* Catalog modal — full-screen sheet on phone */
@media (max-width: 720px) {
  .modal-overlay { padding: 0 !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    height: 100vh !important;
    grid-template-columns: 1fr !important;
  }
  .modal-right { padding: 24px 20px calc(24px + var(--sab)) !important; }
  .modal-sku { font-size: 26px !important; }
  .modal-cta { padding: 16px 22px !important; min-height: 52px; }
  .modal-close { top: max(14px, var(--sat)) !important; right: 14px !important; width: 40px; height: 40px; }
}

/* Gallery masonry — bigger gaps on tablet, 1col on small */
@media (max-width: 600px) {
  .masonry { column-count: 1 !important; column-gap: 12px !important; }
  .masonry > * { margin-bottom: 12px !important; }
  .g-card .meta { padding: 12px 14px 14px !important; }
}

/* Studio gallery grid */
@media (max-width: 720px) {
  .grid-wrap { padding: 20px 16px 80px !important; }
  .filters { padding: 32px 16px 12px !important; }
  .filters__group { gap: 8px !important; }
  .chip { min-height: 40px; padding: 10px 14px !important; font-size: 13px !important; }
  /* Studio gallery hero (border-bottom hero, не grid landing) — reduce huge top-padding */
  .hero[style], .hero:not(.hero__text):not(.hero__visual):not(.hero-wrap):not(.hero__h) {
    /* fallback selector specific enough not to hit landing's grid .hero */
  }
}

/* Lightbox (gallery + studio gallery) — fullscreen on phone */
@media (max-width: 720px) {
  .lb { padding: 0 !important; }
  .lb-wrap,
  .lb__inner {
    max-width: 100% !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    grid-template-columns: 1fr !important;
    overflow-y: auto;
  }
  .lb-image { aspect-ratio: 1/1 !important; }
  .lb-side, .lb__info { padding: 24px 20px calc(24px + var(--sab)) !important; }
  .lb-title, .lb__sku { font-size: 22px !important; }
  .lb-cta, .lb__cta { padding: 14px 20px !important; min-height: 52px; }
  .lb__close, .lb-close { top: max(14px, var(--sat)) !important; right: 14px !important; width: 44px !important; height: 44px !important; }
}

/* ============================================================
   H. STUDIO FORM (/studio) — chips, sliders, drop-zone
   ============================================================ */
@media (max-width: 768px) {
  main > .max-w-7xl,
  main.max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }

  h1.studio-h1 { font-size: clamp(24px, 7vw, 32px) !important; }

  .drop-zone { min-height: 220px !important; }
  .drop-zone #drop-empty { padding: 24px 16px !important; }
  .drop-zone #drop-empty .text-6xl { font-size: 48px !important; }

  /* SKU grid: 2 cols on mobile */
  #sku-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; max-height: 540px !important; }

  /* Category filter pills */
  .cat-pill { min-height: 40px; padding: 10px 14px !important; font-size: 13px !important; }

  /* Param blocks comfortable */
  .param-block { padding: 14px !important; }
  .chip { min-height: 40px; padding: 10px 14px !important; font-size: 13px !important; }
  .chip-row { gap: 8px !important; }
  .slider-title { font-size: 13px !important; }
  .slider-value { font-size: 13px !important; }

  /* Inputs — 48px min */
  .input-dark { min-height: 48px; font-size: 16px !important; }
  textarea.input-dark { min-height: 96px !important; }

  /* Submit button mega */
  .submit-mega { padding: 18px 18px !important; font-size: 14px !important; letter-spacing: 0.12em !important; }

  /* Progress overlay on phone */
  .progress-overlay { padding: 24px 16px !important; }
  .progress-card { padding: 22px 18px !important; border-radius: 14px !important; }
  .progress-card .head { flex-wrap: wrap; gap: 8px; }
  .progress-card .bottom-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .progress-card .bottom-row .btn-ghost { width: 100%; min-height: 48px; padding: 12px 18px !important; }

  /* Sample row */
  #sample-row .flex { flex-wrap: wrap !important; }
  .sample-btn { min-width: calc(50% - 6px); }
  .sample-btn img { height: 80px !important; }
}

@media (max-width: 600px) {
  .submit-mega { padding: 18px 14px !important; }
}

/* Compare slider on mobile — square */
@media (max-width: 720px) {
  .compare-handle::after { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .compare-tag { font-size: 10px !important; padding: 5px 12px !important; }
}

/* ============================================================
   I. CABINET / LOGIN
   ============================================================ */
@media (max-width: 600px) {
  /* Cabinet header heading */
  main > section h1 { font-size: clamp(24px, 7vw, 30px) !important; }
  /* Login card — comfortable padding */
  main .card { padding: 24px 20px !important; }
  main .tab-btn { min-height: 44px; padding: 10px 16px !important; }
  /* Auth inputs — 48px */
  .input-dark { min-height: 48px; font-size: 16px !important; padding: 0 14px !important; }
  textarea.input-dark { padding: 12px 14px !important; }
  .btn-primary { min-height: 48px; }
}

/* ============================================================
   J. CTA Sticky + CHAT-FAB / Consultant — safe area, no overlap
   ============================================================ */

/* iOS safe-area: lift FAB above the home indicator */
.chat-fab,
.consultant-fab {
  bottom: max(24px, calc(var(--sab) + 16px)) !important;
}

@media (max-width: 600px) {
  .chat-fab,
  .consultant-fab {
    width: 56px !important; height: 56px !important;
    right: max(16px, var(--sar)) !important;
    bottom: max(20px, calc(var(--sab) + 14px)) !important;
  }
  .chat-fab svg,
  .consultant-fab svg { width: 22px !important; height: 22px !important; }
}

/* Chat panel — almost fullscreen on phones */
@media (max-width: 600px) {
  .chat-panel,
  .consultant-panel {
    right: max(10px, var(--sar)) !important;
    left: max(10px, var(--sal)) !important;
    bottom: calc(80px + var(--sab)) !important;
    top: max(14px, calc(var(--sat) + 14px));
    width: auto !important;
    height: auto !important;
    max-height: none;
  }
  .chat-input textarea,
  .consultant-input textarea { font-size: 16px !important; }
  .chat-input__send,
  .consultant-input__send { width: 44px !important; height: 44px !important; }
  .chat-suggest,
  .consultant-suggest { min-height: 36px; padding: 9px 14px !important; font-size: 12.5px !important; }
}

/* Sticky CTA — leave room for FAB */
.sticky-cta {
  right: max(20px, var(--sar)) !important;
  bottom: max(96px, calc(var(--sab) + 88px)) !important;
}
.sticky-cta__btn { min-height: 44px; padding: 12px 20px !important; }

@media (max-width: 600px) {
  .sticky-cta { right: max(16px, var(--sar)) !important; bottom: max(88px, calc(var(--sab) + 80px)) !important; }
}

/* Dock — hide pills on small phones, keep open-studio chip and primary state */
@media (max-width: 600px) {
  .dock {
    bottom: max(18px, calc(var(--sab) + 12px)) !important;
    left: 16px; right: 92px; transform: none;
    padding: 4px !important; gap: 2px;
    width: calc(100% - 32px - 76px);
    overflow: hidden;
  }
  .dock__pill, .dock__divider { display: none !important; }
  .dock__pill--primary {
    display: inline-flex !important;
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 12px !important;
    flex: 1;
    justify-content: center;
  }
  .dock__chat { min-height: 44px; padding: 10px 14px !important; font-size: 12px !important; flex: 1; justify-content: center; }
}

/* When chat panel open — push sticky cta out of the way */
.chat-panel.open ~ .sticky-cta,
.consultant-panel.open ~ .sticky-cta { opacity: 0 !important; pointer-events: none !important; }

/* ============================================================
   K. FORM ELEMENTS — no zoom on iOS focus
   ============================================================ */
input, select, textarea {
  font-size: max(16px, 1rem); /* iOS zooms when <16px */
}
@media (min-width: 768px) {
  input, select, textarea { font-size: 15px; }
}

/* Buttons — ensure decent target on every page */
button, a.cta-primary, a.cta-secondary, .btn-primary, .btn-ghost {
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  button.btn-primary, .btn-primary, button.btn-tab, .btn-tab { min-height: 48px; }
}

/* ============================================================
   L. SMALL-DEVICE FINE TUNING — 360..380 px range
   ============================================================ */
@media (max-width: 380px) {
  .topbar { padding-left: 14px !important; padding-right: 14px !important; }
  .topbar__cta { padding: 9px 12px !important; font-size: 12px !important; }
  .topbar__logo { font-size: 13px !important; gap: 8px !important; }
  .topbar__logo-mark { width: 26px !important; height: 26px !important; }

  .hero__text { padding: 92px 16px 36px !important; }
  .hero__h { font-size: 34px !important; }

  section.s { padding: 56px 16px !important; }
  .ctablock { padding: 64px 16px !important; }

  .stats__cell { padding: 18px 12px !important; }
  .stats__num { font-size: 28px !important; }

  .step, .pillar { padding: 22px 18px !important; }
  .step__h, .pillar__h { font-size: 19px !important; }
  .step__p, .pillar__p { font-size: 14px !important; }

  .case__num, .case-mini__num, .pillar__num, .step__num { letter-spacing: 0.18em !important; }
}

/* ============================================================
   M. CONSULTANT FAB — pulse fix
   ============================================================ */
.consultant-fab__pulse,
.chat-fab__pulse { pointer-events: none; }

/* ============================================================
   N. IMAGE LOADING SHIMMER + ERROR FALLBACK
   Все <img> на тёмном фоне получают shimmer-skeleton до загрузки.
   После onload — `.loaded` снимает фон. При onerror — .img-error.
   Скелетон применяется только к <img> внутри известных контейнеров —
   чтобы не задеть UI-иконки в кнопках/SVG.
   ============================================================ */
.card .frame img,
.sku-card .preview img,
.g-card .ba img,
.lb-image img,
.modal-left img,
.thumb img {
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.5s linear infinite;
}
.card .frame img.loaded,
.sku-card .preview img.loaded,
.g-card .ba img.loaded,
.lb-image img.loaded,
.modal-left img.loaded,
.thumb img.loaded {
  background: none;
  animation: none;
}
.img-error {
  object-fit: contain !important;
  background: #0a0a0a !important;
  animation: none !important;
}
@keyframes img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card .frame img,
  .sku-card .preview img,
  .g-card .ba img,
  .lb-image img,
  .modal-left img,
  .thumb img { animation: none; }
}

/* ============================================================
   O. CATALOG — "Показать ещё" pagination button
   ============================================================ */
.load-more {
  display: flex; justify-content: center;
  margin: 56px 0 32px;
}
.load-more-btn {
  appearance: none;
  background: transparent;
  color: #E8E8E8;
  border: 1px solid #2A2A2A;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .25s cubic-bezier(.22,1,.36,1);
  min-height: 48px;
}
.load-more-btn:hover {
  border-color: #FD6143;
  color: #FD6143;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(253,97,67,0.45);
}
.load-more-btn:active { transform: translateY(0); }

/* ============================================================
   P. MOBILE LINE-HEIGHT — fix tight 1.05-1.08 headings (Playwright finding)
   На мобильных h2/h3 и кастомные заголовки должны быть читаемы.
   ============================================================ */
@media (max-width: 600px) {
  h2, h3,
  .s__h, .case__name, .ctablock__h,
  .sec-head .sh-title,
  .hero__h, .pcase__h,
  .step__h, .pillar__h,
  .section__h, .lb-title,
  .modal-sku, .editorial-quote {
    line-height: 1.2 !important;
  }
  .display { line-height: 1.08 !important; }
}