/* ============================================================
   МАСТЕР ФУРНИТУРА — Design tokens
   Concept: «Cex + ателье» — техническая точность + рукодельная эмоция
   ============================================================ */

:root {
  /* Brand greens */
  --mf-green-900: #0E3322;
  --mf-green-700: #1F5A3A;   /* primary */
  --mf-green-500: #2D7A52;
  --mf-green-300: #6FBF8F;   /* accent / mint */
  --mf-green-100: #D9EBDF;
  --mf-green-50:  #EDF5EF;

  /* Neutrals — warm-toned */
  --mf-ink:       #14181A;
  --mf-graphite:  #1A1A1A;
  --mf-stone-700: #3A3A38;
  --mf-stone-500: #6B6B66;
  --mf-stone-400: #8F8F88;
  --mf-stone-300: #C7C5BD;
  --mf-stone-200: #E4E1D7;
  --mf-stone-100: #EFECE3;
  --mf-paper:     #FAF8F3;   /* primary off-white */
  --mf-paper-2:   #F4F1E8;
  --mf-white:     #FFFFFF;

  /* Functional */
  --mf-red:       #B8412B;   /* sale / error */
  --mf-amber:     #C68A2E;   /* hit / opt-discount */
  --mf-azure:     #2F5C8A;   /* info */

  /* Type */
  --mf-font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --mf-font-text:    "Onest", "Manrope", system-ui, sans-serif;
  --mf-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Radii */
  --mf-r-xs: 4px;
  --mf-r-sm: 8px;
  --mf-r-md: 12px;
  --mf-r-lg: 18px;

  /* Shadows */
  --mf-shadow-card: 0 1px 0 rgba(20,24,26,.04), 0 6px 22px -10px rgba(20,24,26,.18);
  --mf-shadow-pop:  0 24px 60px -20px rgba(14,51,34,.30), 0 4px 12px rgba(20,24,26,.06);

  /* Hexagon — pointy-top, derived ratio: width:height = √3 : 2  ≈ 0.866 */
  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Base layer */
.mf-frame {
  background: var(--mf-paper);
  color: var(--mf-graphite);
  font-family: var(--mf-font-text);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mf-frame *, .mf-frame *::before, .mf-frame *::after {
  box-sizing: border-box;
}
.mf-frame h1, .mf-frame h2, .mf-frame h3, .mf-frame h4 {
  font-family: var(--mf-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--mf-ink);
}
.mf-frame p { margin: 0; }
.mf-frame button { font: inherit; cursor: pointer; }
.mf-frame a { color: inherit; text-decoration: none; }

/* Mono / SKU */
.mf-mono { font-family: var(--mf-font-mono); font-size: .78em; letter-spacing: 0; }
.mf-tab  { font-feature-settings: "tnum"; }

/* Hex utilities */
.mf-hex {
  clip-path: var(--hex-clip);
  aspect-ratio: 0.866 / 1;
}
.mf-hex-row { display: flex; }

/* Stitched dashed border — needle and thread motif */
.mf-stitch {
  background-image: repeating-linear-gradient(
    90deg,
    var(--mf-stone-400) 0 6px, transparent 6px 12px
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* Striped placeholder for missing product imagery */
.mf-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--mf-stone-200) 0 8px,
      var(--mf-stone-100) 8px 16px
    );
  color: var(--mf-stone-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mf-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: lowercase;
}

/* Buttons */
.mf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500; font-size: 14px;
  letter-spacing: -0.005em;
  transition: background .14s ease, color .14s, border-color .14s, transform .12s;
  white-space: nowrap;
}
.mf-btn--primary {
  background: var(--mf-green-700); color: #fff;
}
.mf-btn--primary:hover { background: var(--mf-green-900); }
.mf-btn--ghost {
  background: transparent; color: var(--mf-ink); border-color: var(--mf-stone-300);
}
.mf-btn--ghost:hover { border-color: var(--mf-ink); }
.mf-btn--light {
  background: var(--mf-white); color: var(--mf-ink); border-color: var(--mf-stone-200);
}
.mf-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.mf-btn--lg { height: 52px; padding: 0 24px; font-size: 15px; }
.mf-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Input */
.mf-input {
  height: 44px; padding: 0 14px;
  border: 1px solid var(--mf-stone-200);
  border-radius: var(--mf-r-sm);
  background: var(--mf-white);
  font: inherit;
  color: var(--mf-ink);
  transition: border-color .14s, box-shadow .14s;
  width: 100%;
}
.mf-input:focus {
  outline: none;
  border-color: var(--mf-green-700);
  box-shadow: 0 0 0 3px var(--mf-green-100);
}

/* Tag / chip */
.mf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--mf-stone-100);
  color: var(--mf-stone-700);
  border: 1px solid transparent;
}
.mf-chip--solid { background: var(--mf-ink); color: #fff; }
.mf-chip--mint  { background: var(--mf-green-100); color: var(--mf-green-900); }
.mf-chip--amber { background: rgba(198,138,46,.14); color: var(--mf-amber); }
.mf-chip--red   { background: rgba(184,65,43,.10); color: var(--mf-red); }

/* Section labels — small caps with hyphen */
.mf-eyebrow {
  font-family: var(--mf-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mf-stone-500);
}
.mf-eyebrow::before { content: "— "; }

/* Hex badge — discount/new */
.mf-hex-badge {
  position: absolute;
  width: 46px; aspect-ratio: 0.866/1;
  clip-path: var(--hex-clip);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mf-font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
}

/* Subtle in-grid hex pattern */
.mf-hex-pattern {
  background-color: var(--mf-paper);
  background-image:
    radial-gradient(circle at 25% 25%, rgba(31,90,58,.04) 0 1.5px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(31,90,58,.04) 0 1.5px, transparent 2px);
  background-size: 28px 28px;
}

/* Scrollbar — invisible inside frames */
.mf-frame ::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   RESPONSIVE — адаптив под планшеты и мобильные
   Перебиваем React inline-стили через [style*=...] + !important
   ============================================================ */

/* ── ПЛАНШЕТ 768–1023px — мягкое уменьшение типографики и отступов ── */
@media (max-width: 1023px) {
  .mf-frame section[style*="padding"],
  .mf-frame footer[style*="padding"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mf-frame header > div[style*="padding: 0 40px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .mf-frame [style*="font-size: 96px"] { font-size: 64px !important; }
  .mf-frame [style*="font-size: 84px"] { font-size: 56px !important; }
  .mf-frame [style*="font-size: 64px"] { font-size: 44px !important; }
  .mf-frame [style*="font-size: 56px"] { font-size: 40px !important; }
  .mf-frame [style*="font-size: 48px"] { font-size: 34px !important; }

  .mf-frame [style*="gap: 60px"],
  .mf-frame [style*="gap: 56px"] { gap: 32px !important; }

  /* Категории / шаги — 4 → 2 колонки */
  .mf-frame [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Лого клиентов 6 → 4 */
  .mf-frame [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* Кейсы 3 → 2 */
  .mf-frame [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer 4 → 2 */
  .mf-frame [style*="grid-template-columns: 1.4fr 1fr 1fr 1.1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── МОБИЛЬНЫЙ <768px — single column, переработка header, скрытие декора ── */
@media (max-width: 767px) {

  /* Документ — край-в-край */
  .mf-stage { padding: 0 !important; background: var(--mf-paper) !important; }
  .mf-doc {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .mf-frame { font-size: 14px; }
  /* Защита от горизонтального вылета */
  html, body, .mf-stage, .mf-doc, .mf-frame { overflow-x: hidden !important; }

  /* Декоративные абсолютные слои (шестиугольники, кляксы) — выключаем */
  .mf-frame [aria-hidden="true"] { display: none !important; }
  /* Декоративные hex внутри заголовков (inline-span с clip-path) — убираем */
  .mf-frame h1 span[style*="clip-path"],
  .mf-frame h2 span[style*="clip-path"] { display: none !important; }

  /* Картинки/SVG не вылезают */
  .mf-frame img, .mf-frame picture { max-width: 100%; height: auto; }

  /* ── HEADER ── */
  /* Скрываем верхнюю инфо-полосу и центральную nav */
  .mf-frame header > div:first-child { display: none !important; }
  .mf-frame header nav { display: none !important; }
  /* Основная строка — лого слева, CTA справа */
  .mf-frame header > div:last-child {
    height: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  /* Лого: оставляем только иконку, скрываем текстовую часть рядом */
  .mf-frame header a[href="#top"] > span[style*="border-left"] {
    display: none !important;
  }
  .mf-frame header a[href="#top"] svg { width: 36px !important; height: auto !important; }
  /* Правый блок шапки: скрываем колонку с телефоном, оставляем кнопку */
  .mf-frame header > div:last-child > div:last-child {
    gap: 0 !important;
  }
  .mf-frame header > div:last-child > div:last-child > div:first-child {
    display: none !important;
  }
  /* Кнопка в шапке — компактнее */
  .mf-frame header .mf-btn--primary {
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* ── СЕКЦИИ — единый padding ── */
  .mf-frame section[style*="padding"],
  .mf-frame footer[style*="padding"] {
    padding: 48px 16px !important;
  }

  /* ── ВСЕ многоколоночные грид-сетки → 1 колонка ──
     Универсальное правило, чтобы перехватить любой формат значения. */
  .mf-frame [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Лого клиентов — в 2 колонки (плотный коллаж) */
  .mf-frame [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Кнопка в шапке не должна переноситься */
  .mf-frame header .mf-btn { white-space: nowrap !important; }

  /* span 2 в форме больше не имеет смысла — сбрасываем */
  .mf-frame [style*="grid-column: span 2"] { grid-column: span 1 !important; }

  /* ── FLEX строки с space-between → wrap ── */
  .mf-frame [style*="space-between"][style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* ── ТИПОГРАФИКА — крупные размеры вниз ── */
  .mf-frame [style*="font-size: 96px"] {
    font-size: 38px !important;
    letter-spacing: -0.025em !important;
  }
  .mf-frame [style*="font-size: 84px"] { font-size: 34px !important; }
  .mf-frame [style*="font-size: 72px"] { font-size: 32px !important; }
  .mf-frame [style*="font-size: 64px"] { font-size: 30px !important; }
  .mf-frame [style*="font-size: 56px"] { font-size: 28px !important; }
  .mf-frame [style*="font-size: 48px"] { font-size: 26px !important; }
  .mf-frame [style*="font-size: 44px"] { font-size: 24px !important; }
  .mf-frame [style*="font-size: 40px"] { font-size: 24px !important; }
  .mf-frame [style*="font-size: 38px"] { font-size: 23px !important; }
  .mf-frame [style*="font-size: 36px"] { font-size: 22px !important; }
  .mf-frame [style*="font-size: 32px"] { font-size: 21px !important; }
  .mf-frame [style*="font-size: 30px"] { font-size: 20px !important; }
  .mf-frame [style*="font-size: 28px"] { font-size: 19px !important; }
  .mf-frame [style*="font-size: 26px"] { font-size: 18px !important; }
  .mf-frame [style*="font-size: 24px"] { font-size: 17px !important; }
  .mf-frame [style*="font-size: 22px"] { font-size: 17px !important; }
  .mf-frame [style*="font-size: 20px"] { font-size: 16px !important; }

  /* ── БОЛЬШИЕ GAP'ы вниз ── */
  .mf-frame [style*="gap: 60px"],
  .mf-frame [style*="gap: 56px"],
  .mf-frame [style*="gap: 48px"],
  .mf-frame [style*="gap: 40px"] { gap: 20px !important; }
  .mf-frame [style*="gap: 32px"],
  .mf-frame [style*="gap: 30px"] { gap: 16px !important; }
  .mf-frame [style*="gap: 24px"] { gap: 14px !important; }

  /* ── БОЛЬШИЕ margin'ы ── */
  .mf-frame [style*="margin-bottom: 56px"],
  .mf-frame [style*="margin-bottom: 48px"],
  .mf-frame [style*="margin-bottom: 40px"] { margin-bottom: 22px !important; }
  .mf-frame [style*="margin-bottom: 32px"],
  .mf-frame [style*="margin-bottom: 28px"] { margin-bottom: 18px !important; }
  .mf-frame [style*="margin-top: 56px"],
  .mf-frame [style*="margin-top: 48px"],
  .mf-frame [style*="margin-top: 36px"],
  .mf-frame [style*="margin-top: 32px"] { margin-top: 22px !important; }

  /* ── min-height у карточек — снимаем (тянутся по контенту) ── */
  .mf-frame [style*="min-height: 360px"],
  .mf-frame [style*="min-height: 280px"],
  .mf-frame [style*="min-height: 260px"],
  .mf-frame [style*="min-height: 240px"] { min-height: auto !important; }

  /* ── ВНУТРИ карточек / aside — меньше padding ── */
  .mf-frame [style*="padding: 36px"] { padding: 22px !important; }
  .mf-frame [style*="padding: 32px"] { padding: 20px !important; }
  .mf-frame [style*="padding: 26px 24px 24px"] { padding: 20px !important; }
  .mf-frame [style*="padding: 24px"] { padding: 18px !important; }
  .mf-frame [style*="padding: 22px 28px"] { padding: 16px 18px !important; }
  .mf-frame [style*="padding: 22px 22px 22px"] { padding: 16px !important; }

  /* Featured tier — убираем сдвиг */
  .mf-frame [style*="translateY(-8px)"] { transform: none !important; }

  /* FAQ — убираем правый «зарезерв» под текстом */
  .mf-frame [style*="padding-right: 60px"] { padding-right: 0 !important; }

  /* Кнопки FAQ — крупнее tap-area */
  .mf-frame .mf-btn--sm { min-height: 36px; }

  /* Hero stats: подписи (большие числа 38px → 24px уже выше) — выравниваем */
  .mf-frame [style*="padding-left: 22"] { padding-left: 14px !important; }

  /* Подложка «прайс с лучшими ценами» — pop-aside смещение убираем */
  .mf-frame [style*="top: -14px"] { left: 16px !important; }

  /* Footer copyright row — стек */
  .mf-frame footer > div[style*="border-top"][style*="space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }

  /* Кнопки — компактнее, не вылезают за край */
  .mf-frame .mf-btn { max-width: 100%; white-space: normal; height: auto !important; min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.2; }

  /* Текстовые input/textarea — full-width, нормальный font-size (16px чтобы iOS не зумил) */
  .mf-frame input, .mf-frame textarea, .mf-frame select { font-size: 16px !important; }
}