/* KATALIK-OPT · внутренние страницы.
   Главная тёмная и «выставочная», внутренние — бумажные и рабочие: сюда
   приходят читать характеристики, а не смотреть эффекты. Токены и примитивы
   общие, из base.css. */

.pg { background: var(--paper); }

.hdr--static { position: static; }

.pg__main {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 52px) var(--pad) clamp(60px, 8vw, 110px);
}

/* --- хлебные крошки --- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--line); }
.crumbs i { font-style: normal; opacity: .4; }

.pg__head { margin: clamp(18px, 3vw, 34px) 0 clamp(24px, 3vw, 40px); }
.pg__h1 { font-size: clamp(28px, 4.2vw, 62px); max-width: 20ch; }
.pg__sub { margin: 14px 0 0; max-width: 56ch; font-size: clamp(14.5px,1.2vw,17px); color: var(--ink-2); }
.pg__lead { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.pg__note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); max-width: 62ch; }
.pg__mt { margin-top: clamp(30px, 4vw, 56px); }
.pg h2.h3 { margin: 0 0 12px; }

/* --- две колонки --- */
.two {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.two p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

/* --- ссылки-разделы --- */
.chips--links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(20px, 3vw, 32px); }
.chips--links a {
  padding: 8px 14px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
  transition: color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.chips--links a i { font-style: normal; opacity: .5; margin-left: 7px; }
.chips--links a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.chips--links a.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }

.cities-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.cities-nav a {
  padding: 7px 13px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-2);
}
.cities-nav a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* --- сетка товаров: та же логика, что на главной --- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0; border-top: 1px solid var(--line);
}
.c { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.c__a { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; height: 100%; position: relative; }
.c__ph { aspect-ratio: 1; background: #fff; overflow: hidden; }
.c__ph img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s var(--ease); }
.c:hover .c__ph img { transform: scale(1.04); }
.c__ph--none {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  background-image: repeating-linear-gradient(45deg, transparent 0 9px, rgba(21,21,15,.05) 9px 10px);
}
.c__ph--none span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.c__d {
  position: absolute; top: 0; right: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 10px; padding: 5px 9px;
}
.c__art { padding: 12px 14px 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-3); }
.c__nm { padding: 0 14px; font-size: 13.5px; line-height: 1.35; }
.c__br { margin-top: auto; padding: 10px 14px 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* --- таблицы --- */
.spec { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.spec tr { border-top: 1px solid var(--line); }
.spec tr:last-child { border-bottom: 1px solid var(--line); }
.spec th, .spec td { padding: 10px 0; text-align: left; font-family: var(--f-mono); font-size: 12px; font-weight: 400; }
.spec th { color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; width: 45%; }

.levels { width: 100%; max-width: 1100px; border-collapse: collapse; table-layout: fixed; }
.levels tr { border-top: 1px solid var(--line); }
.levels tr:last-child { border-bottom: 1px solid var(--line); }
.levels th, .levels td { padding: 20px 24px 22px 0; vertical-align: top; text-align: left; }
.levels th {
  width: clamp(140px, 15vw, 210px);
  font-family: var(--f-display); font-size: clamp(20px, 2vw, 30px);
  font-weight: 600; text-transform: uppercase; line-height: 1;
}
.levels td { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.levels td.n {
  width: clamp(120px, 13vw, 180px); padding-right: 0; text-align: right;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
@media (max-width: 760px) {
  .levels, .levels tbody, .levels tr, .levels th, .levels td { display: block; width: auto; }
  .levels th { padding-bottom: 6px; }
  .levels td { padding: 0 0 8px; }
  .levels td.n { text-align: left; padding-bottom: 20px; }
}

/* --- карточка товара --- */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.prod__ph { margin: 0; background: #fff; border: 1px solid var(--line); }
.prod__ph img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.prod__ph .c__ph--none { border: 0; }
.prod__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 760px) { .prod { grid-template-columns: 1fr; } }

/* --- виды узла --- */
.types { list-style: none; margin: 0; padding: 0; }
.types li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.types li:first-child { border-top: 1px solid var(--line); }
.types b { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.types span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* --- контакты --- */
.contacts { list-style: none; margin: 0; padding: 0; }
.contacts li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contacts li:first-child { border-top: 1px solid var(--line); }
.contacts em {
  font-style: normal; min-width: 90px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.contacts a { font-size: 15px; border-bottom: 1px solid var(--line); }
.contacts a:hover { border-bottom-color: var(--flame); color: var(--flame); }

/* --- вопросы --- */
.faq__list { max-width: 900px; }
.pg details { border-top: 1px solid var(--line); }
.pg details:last-child { border-bottom: 1px solid var(--line); }
.pg summary {
  display: flex; align-items: baseline; gap: 22px;
  padding: 20px 0; cursor: pointer; list-style: none; font-size: 15.5px;
}
.pg summary::-webkit-details-marker { display: none; }
.pg summary i { font-style: normal; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); min-width: 28px; }
.pg summary span { flex: 1; }
.pg summary::after { content: '+'; font-family: var(--f-mono); color: var(--flame); font-size: 17px; }
.pg details[open] summary::after { content: '–'; }
.pg details p { margin: 0 0 22px 50px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
@media (max-width: 760px) { .pg details p { margin-left: 0; } }