/* ErGear — namespace eg-. Ничего отсюда не переносить на соседние проекты:
   палитра снята с логотипа и баннера бренда, сетка рассчитана на СМЕШАННЫЕ
   пропорции фото (кресла портретные 960x1200, кронштейны почти квадратные и
   ландшафтные до 1200x806) — поэтому картинка тут contain в фиксированном
   боксе, а не absolute-cover, как у портретных каталогов. */

:root {
  --ink: #191d21;      /* чернила: шапка, подвал, герой */
  --steel: #3a444d;    /* сталь: рамы, второстепенный текст на светлом */
  --orange: #ef6317;   /* акцент с логотипа */
  --orange-d: #cc4f0c;
  --sand: #c5b6a6;     /* песок с баннера */
  --sand-l: #e8e1d8;
  --paper: #f6f5f3;
  --line: #dcd7d0;
  --white: #fff;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('../fonts/plexsans-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16.5px/1.62 'Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; line-height: 1.14; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(30px, 5.2vw, 50px); }
h2 { font-size: clamp(23px, 3.2vw, 33px); }
h3 { font-size: 18px; letter-spacing: -.01em; }
p { margin: 0 0 15px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0 0 15px; padding-left: 20px; }
li { margin-bottom: 7px; }

.eg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.eg-sec { padding: 54px 0; }
.eg-sec-t { padding-top: 0; }
.eg-lead { font-size: 18.5px; color: var(--steel); max-width: 62ch; }
.eg-eyebrow {
  font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--orange);
  margin: 0 0 9px;
}
.eg-prose { max-width: 74ch; }
.eg-prose p { color: #2c3339; }

/* ---------- шапка: тёмная, липкая ---------- */
.eg-head { background: var(--ink); color: #eceae7; position: sticky; top: 0; z-index: 60; border-bottom: 1px solid #2b3238; }
.eg-head-in { display: flex; align-items: center; gap: 18px; height: 62px; }
.eg-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.eg-brand svg { width: 26px; height: 26px; }
.eg-brand b { font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -.03em; }
.eg-brand i { font-style: normal; color: var(--orange); }
.eg-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.eg-nav a {
  text-decoration: none; font-size: 14px; padding: 7px 10px; border-radius: 3px;
  color: #b9c0c6; white-space: nowrap;
}
.eg-nav a:hover { color: #fff; background: #262d33; }
.eg-nav a.eg-on { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.eg-nav .eg-nav-tool { color: var(--orange); }
.eg-nav .eg-nav-tool:hover { color: #fff; background: var(--orange); }
.eg-burger { display: none; width: 40px; height: 34px; margin-left: auto; background: none; border: 1px solid #39424a; border-radius: 3px; cursor: pointer; position: relative; }
.eg-burger span, .eg-burger span::before, .eg-burger span::after { position: absolute; left: 10px; width: 18px; height: 2px; background: #e6e3e0; content: ''; }
.eg-burger span { top: 15px; }
.eg-burger span::before { top: -6px; left: 0; }
.eg-burger span::after { top: 6px; left: 0; }

/* ---------- герой: чернила + линейка высоты, нарисованная кодом ---------- */
.eg-hero { background: var(--ink); color: #f2f0ee; position: relative; overflow: hidden; }
.eg-hero-in { position: relative; z-index: 2; padding: 56px 0 50px; max-width: 700px; }
.eg-hero h1 { color: #fff; }
.eg-hero h1 em { font-style: normal; color: var(--orange); }
.eg-hero p { color: #b6bec5; font-size: 18.5px; max-width: 56ch; margin-top: 16px; }
.eg-rule {
  position: absolute; inset: 0 0 0 auto; width: 46%; min-width: 330px; z-index: 1;
  opacity: .85; pointer-events: none;
}
.eg-rule svg { width: 100%; height: 100%; }
.eg-hero-btns { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 26px; }
.eg-facts { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid #2e363d; }
.eg-facts div b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 25px; color: #fff; line-height: 1.1; }
.eg-facts div span { font-size: 12.5px; color: #8b959d; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- кнопки ---------- */
.eg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px;
  padding: 11px 18px; border-radius: 3px; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.eg-btn-go { background: var(--orange); color: #fff; }
.eg-btn-go:hover { background: var(--orange-d); }
.eg-btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.eg-btn-line:hover { background: var(--ink); color: #fff; }
.eg-hero .eg-btn-line { color: #fff; border-color: #59636b; }
.eg-hero .eg-btn-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.eg-btn-sm { padding: 8px 13px; font-size: 13.5px; }
.eg-btn svg { flex: none; }


/* ---------- карточка ---------- */
.eg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eg-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  transition: box-shadow .16s, border-color .16s;
}
.eg-card:hover { border-color: var(--steel); box-shadow: 0 10px 26px -18px rgba(25, 29, 33, .55); }
/* фото: разные пропорции у разных разделов, поэтому фиксированный бокс + contain */
.eg-card-img { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; }
.eg-card-img a { display: block; aspect-ratio: 4 / 3; padding: 14px; }
.eg-card-img img { width: 100%; height: 100%; object-fit: contain; }
.eg-tag {
  position: absolute; left: 0; top: 12px; z-index: 2; background: var(--ink); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; padding: 5px 10px 5px 9px;
}
.eg-tag-o { background: var(--orange); }
.eg-card-b { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.eg-card-cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a9199; margin-bottom: 6px; }
.eg-card-b h3 a { text-decoration: none; }
.eg-card-b h3 a:hover { color: var(--orange); }
.eg-card-b > p { font-size: 14px; color: var(--steel); margin: 8px 0 12px; }
/* строки характеристик с точечным выносом — вместо трёх центрированных цифр у соседей */
.eg-rows { margin: 0 0 13px; font-size: 13px; }
.eg-rows div { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.eg-rows dt, .eg-rows i { color: #7d858d; font-style: normal; white-space: nowrap; }
.eg-rows u { flex: 1; border-bottom: 1px dotted #cdc8c1; text-decoration: none; transform: translateY(-3px); }
.eg-rows b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.eg-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; }
.eg-price s { color: #9aa1a8; font-weight: 400; font-size: 14px; margin-left: 7px; }
.eg-rate { font-size: 13px; color: var(--steel); white-space: nowrap; }
.eg-star { color: var(--orange); }
.eg-card-act { display: flex; gap: 8px; margin-top: 12px; }
.eg-card-act .eg-btn { flex: 1; }

.eg-grid-note { font-size: 13.5px; color: var(--steel); margin: 18px 0 0; }
.eg-more { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; align-items: center; }
.eg-more a { font-size: 13.5px; text-decoration: none; border: 1px solid var(--line); background: var(--white); border-radius: 3px; padding: 7px 12px; }
.eg-more a:hover { border-color: var(--ink); }
.eg-more a b { font-family: 'Space Grotesk', sans-serif; color: var(--orange); margin-left: 5px; }

/* ---------- инструменты (расчёт высоты, подбор кронштейна) ---------- */
.eg-tool { background: var(--ink); color: #eceae7; border-radius: 5px; padding: 26px; }
.eg-tool h2, .eg-tool h3 { color: #fff; }
.eg-tool p { color: #b0b8bf; }
.eg-tool label { display: block; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: #8f99a1; margin-bottom: 6px; }
.eg-tool input, .eg-tool select {
  width: 100%; background: #232a30; color: #fff; border: 1px solid #39424a; border-radius: 3px;
  padding: 10px 11px; font: inherit; font-size: 15px;
}
.eg-tool input:focus, .eg-tool select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.eg-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.eg-fields-2 { grid-template-columns: repeat(2, 1fr); }
.eg-out { background: #232a30; border: 1px solid #39424a; border-left: 3px solid var(--orange); border-radius: 3px; padding: 18px; }
.eg-out-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.eg-out-num div b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.eg-out-num div span { font-size: 12px; color: #8f99a1; }
.eg-out p:last-child { margin-bottom: 0; }
.eg-hit { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #333b42; }
.eg-hit img { width: 52px; height: 52px; object-fit: contain; background: var(--paper); border-radius: 3px; padding: 3px; flex: none; }
.eg-hit b { display: block; font-size: 14.5px; }
.eg-hit span { font-size: 12.5px; color: #8f99a1; }
.eg-hit a { margin-left: auto; }

/* ---------- сравнительная таблица ---------- */
.eg-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
table.eg-tbl { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 640px; }
.eg-tbl th, .eg-tbl td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); }
.eg-tbl thead th { background: var(--ink); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.eg-tbl tbody tr:nth-child(even) { background: #faf9f8; }
.eg-tbl tbody tr:hover { background: var(--sand-l); }
.eg-tbl td b { font-variant-numeric: tabular-nums; }
.eg-tbl a { color: var(--ink); }
.eg-tbl-note { font-size: 13px; color: var(--steel); margin-top: 10px; }
/* таблица преимуществ: третья колонка — текст, ей нужна ширина, первым двум нет */
.eg-tbl-adv td { vertical-align: top; }
.eg-tbl-adv td:first-child { width: 22%; }
.eg-tbl-adv .eg-adv-n { width: 14%; white-space: nowrap; color: var(--orange); font-family: 'Space Grotesk', sans-serif; font-size: 13px; }
.eg-tbl-adv .eg-adv-w { color: #2c3339; line-height: 1.55; }

/* ---------- PDP ---------- */
.eg-crumbs { font-size: 13px; color: var(--steel); padding: 16px 0 0; }
.eg-crumbs a { text-decoration: none; }
.eg-crumbs a:hover { color: var(--orange); }
.eg-pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; padding: 22px 0 46px; align-items: start; }
.eg-fig { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 22px; position: sticky; top: 82px; }
.eg-fig img { width: 100%; height: auto; max-height: 520px; object-fit: contain; margin: 0 auto; }
.eg-pdp h1 { font-size: clamp(25px, 3.4vw, 35px); }
.eg-buyline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.eg-buyline .eg-price { font-size: 30px; }
.eg-pdp-act { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.eg-pdp-act .eg-btn { padding: 13px 22px; font-size: 15.5px; }
.eg-note { font-size: 13px; color: var(--steel); }
.eg-warn { background: #fff5ec; border: 1px solid #f3ceae; border-left: 3px solid var(--orange); border-radius: 3px; padding: 13px 15px; font-size: 14.5px; margin: 16px 0; }
.eg-warn b { font-family: 'Space Grotesk', sans-serif; }
.eg-block { margin-top: 30px; }
.eg-block h2 { font-size: 21px; margin-bottom: 12px; }
.eg-feats { list-style: none; padding: 0; margin: 0; }
.eg-feats li { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.eg-feats li svg { flex: none; color: var(--orange); margin-top: 3px; }
.eg-feats li b { display: block; font-family: 'Space Grotesk', sans-serif; }
.eg-spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.eg-spec td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.eg-spec td:first-child { color: var(--steel); width: 42%; }
.eg-spec td:last-child { font-weight: 600; }
.eg-box { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; }
.eg-box h3 { margin-bottom: 4px; }
.eg-box > p:first-of-type { font-size: 13px; color: var(--steel); }
.eg-related { padding-bottom: 54px; }

/* ---------- FAQ, размеченный аккордеон ---------- */
.eg-faq { border-top: 1px solid var(--line); }
.eg-faq details { border-bottom: 1px solid var(--line); }
.eg-faq summary { cursor: pointer; padding: 15px 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16.5px; list-style: none; display: flex; gap: 12px; align-items: flex-start; }
.eg-faq summary::-webkit-details-marker { display: none; }
.eg-faq summary::before { content: '+'; color: var(--orange); font-size: 20px; line-height: 1.1; flex: none; }
.eg-faq details[open] summary::before { content: '\2212'; }
.eg-faq div { padding: 0 0 15px 24px; color: #2c3339; max-width: 76ch; }

/* ---------- подвал ---------- */
.eg-foot { background: var(--ink); color: #a8b0b7; padding: 46px 0 22px; font-size: 14.5px; margin-top: 20px; }
.eg-foot a { color: #cfd5da; text-decoration: none; }
.eg-foot a:hover { color: var(--orange); }
.eg-foot h4 { color: #fff; font-size: 13px; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 12px; }
.eg-foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.eg-foot-cols ul { list-style: none; padding: 0; margin: 0; }
.eg-foot-cols li { margin-bottom: 8px; }
.eg-foot-brand { display: flex; align-items: center; gap: 9px; color: #fff; margin-bottom: 12px; }
.eg-foot-brand svg { width: 24px; height: 24px; }
.eg-foot-brand b { font-family: 'Space Grotesk', sans-serif; font-size: 19px; letter-spacing: -.03em; }
.eg-foot-n { color: var(--orange); margin-left: 6px; font-size: 12.5px; }
.eg-foot-bot { border-top: 1px solid #2c343b; margin-top: 30px; padding-top: 18px; font-size: 13px; color: #7f888f; }
.eg-foot-bot p { margin: 0 0 7px; }

/* ---------- 404 ---------- */
.eg-404 { text-align: center; padding: 80px 0; }
.eg-404 .eg-facts { justify-content: center; border: 0; }

@media (max-width: 900px) {
  .eg-grid { grid-template-columns: repeat(2, 1fr); }
  .eg-pdp { grid-template-columns: 1fr; gap: 24px; }
  .eg-fig { position: static; }
  .eg-foot-cols { grid-template-columns: 1fr 1fr; }
  .eg-rule { width: 60%; opacity: .35; }
  .eg-out-num { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .eg-burger { display: block; }
  .eg-nav {
    display: none; position: absolute; left: 0; right: 0; top: 62px; background: var(--ink);
    flex-direction: column; align-items: stretch; padding: 8px 14px 16px; border-bottom: 1px solid #2b3238;
  }
  .eg-nav-open .eg-nav { display: flex; }
  .eg-nav a { padding: 11px 6px; font-size: 15px; }
  .eg-nav a.eg-on { box-shadow: inset 3px 0 0 var(--orange); }
  .eg-fields, .eg-fields-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .eg-grid { grid-template-columns: 1fr; }
  .eg-foot-cols { grid-template-columns: 1fr; }
  .eg-sec { padding: 38px 0; }
  .eg-facts { gap: 20px 26px; }
  .eg-tool { padding: 20px 16px; }
}