/* ===== Каталог «Изделия» — стили страницы (подключается после style.css) ===== */

.muted { color: var(--concrete); }
.nw { white-space: nowrap; } /* «ВНИИТЭ-ПТ» не рвётся на дефисе */

/* ---------- заголовок ---------- */
.cat-head { padding-bottom: 28px; }
.cat-head .top { display: flex; justify-content: space-between; gap: 16px; color: var(--concrete); }
.cat-head h1 { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; white-space: nowrap; }
.cat-head h1 .ch { display: inline-block; will-change: transform; }
.cat-head .row b { color: var(--red); font-weight: 500; }

/* ---------- панель инструментов ---------- */
.cat-tools {
  position: sticky; top: var(--head); z-index: 20;
  align-items: flex-end; padding-top: 12px; padding-bottom: 14px; margin-bottom: 32px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
/* когда панель прилипла — закрываем полосу под шапкой, чтобы контент не мешал навигации */
.cat-tools::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--head); background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .25s; }
.cat-tools.stuck::before { opacity: 1; }
.cat-tools .filters { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.fgroup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fgroup .lbl { color: var(--concrete); flex-shrink: 0; }

.cat-tools .seg { position: relative; flex-shrink: 0; }
/* подписи кнопок всегда тёмные; белые — копия внутри индикатора (.ind-in, clip-эффект), едет вместе с ним */
.cat-tools .seg button { position: relative; white-space: nowrap; transition: color .35s; }
.cat-tools .seg button.on { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .cat-tools .seg button:not(.on):hover { color: var(--red); }
}
.cat-tools .seg .ind { overflow: hidden; }
.cat-tools .seg .ind-in { position: absolute; top: 0; bottom: 0; left: 0; color: var(--paper); font-style: normal; pointer-events: none; }
.cat-tools .seg .ind-in > span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.cat-tools .seg .ind-in em { display: inline-block; font-style: normal; line-height: 1.5; } /* строка как у кнопки (sup сдвигает базовую линию одинаково) */
.cat-tools .seg .ind-in sup { font-size: 9px; margin-left: 4px; vertical-align: super; opacity: .55; }
.cat-tools .seg button:disabled { opacity: .35; pointer-events: none; }
.cat-tools .seg button sup { font-size: 9px; margin-left: 4px; vertical-align: super; opacity: .55; }
.cat-tools .seg button + button { border-left: 1px solid var(--line); }
.cat-tools .seg .ind { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); z-index: 2; pointer-events: none; }
.cat-tools .seg-mode .ind { background: var(--red); }

/* развёртка-сканер при смене Сетка ↔ Чертёж */
.cat-sweep {
  position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: 40; pointer-events: none; opacity: 0;
  background: var(--red); box-shadow: 0 0 18px 2px rgba(227, 6, 19, .45);
}

/* ---------- сетка ---------- */
.cat-view { position: relative; }
.catalog { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
/* заголовок ряда: «Куртки 04 · ПК 1 · ПК 2 … · 22 000 ₽» — как строка спецификации на чертеже */
.cat-row-h { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 10px 0 8px; margin-top: 20px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); color: var(--concrete); }
.cat-row-h:first-child { margin-top: 0; }
.cat-row-h > span:first-child { color: var(--ink); }
.cat-row-h sup { font-size: 9px; vertical-align: super; opacity: .6; }
.mode-blueprint .cat-row-h { border-top-color: var(--red); }
.mode-blueprint .cat-row-h > span:first-child { color: var(--red); }
/* линии под карточками ряда — на одной высоте: карточка тянется на высоту ряда, черта прижата к низу */
.catalog .card { display: flex; flex-direction: column; }
.catalog .card .meta { flex: 1 0 auto; }
.catalog .card .meta > div { min-width: 0; }
/* ПК 3: кадрирование (см. FOCUS в catalog.js) */
.catalog .card .ph img.main.zoom { transform: scale(var(--z, 1)); transform-origin: 50% var(--oy, 50%); }
@media (hover: hover) and (pointer: fine) {
  .catalog .card:hover .ph img.main.zoom { transform: scale(calc(var(--z, 1) * 1.04)); }
}
/* брюки: в «Сетке» ховер — второй кадр, в «Чертеже» заливка тем же кадром */
.catalog:not(.mode-blueprint) .card .ph img.alt-bp, .mode-blueprint .card .ph img.alt-grid { display: none; }
.catalog .card .meta .art { display: none; margin-top: 4px; color: var(--red); font-size: 10px; }
.catalog .card .ph img.main { transition: opacity .5s, transform 1.2s cubic-bezier(.2,.7,.1,1), filter .8s; }
.catalog .card .ph { transition: background-color .6s; container-type: inline-size; }

/* «Комплектующие — скоро» */
.card.soon .ph { position: relative; }
.card.soon .soon-tag { position: absolute; left: 12px; bottom: 12px; color: rgba(239, 237, 231, .55); font-size: 10px; }
.card.soon.flash .ph { animation: soon-flash 1.1s cubic-bezier(.2,.7,.1,1) 3; }
.card.soon.flash .meta { animation: soon-meta 3.3s ease; }
@keyframes soon-flash {
  0% { box-shadow: 0 0 0 0 rgba(227, 6, 19, .9), inset 0 0 0 0 var(--red); }
  40% { box-shadow: 0 0 0 10px rgba(227, 6, 19, .0), inset 0 0 0 6px var(--red); }
  100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0), inset 0 0 0 0 var(--red); }
}
@keyframes soon-meta { 0%, 80% { border-color: var(--red); color: var(--red); } 100% { border-color: var(--ink); } }

/* ---------- режим «Чертёж» (базовые правила в style.css) ---------- */
.mode-blueprint .card .ph {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(227, 6, 19, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 6, 19, .08) 1px, transparent 1px);
  background-size: 20px 20px; background-position: 10px 10px;
}
.bp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* контур: выделение границ (SVG-фильтр #bp-edge в catalog.html); multiply — чтобы сквозь «призрак» фото была видна сетка */
.mode-blueprint .card .ph img.main { filter: url(#bp-edge); mix-blend-mode: multiply; opacity: 1; }
.mode-blueprint .card .ph .no { opacity: 0; }
.mode-blueprint .card .meta .art { display: block; }
.mode-blueprint .card .meta { border-bottom-color: var(--red); }
.mode-blueprint .card.soon .ph { background-color: #fff; color: var(--ink); }
.mode-blueprint .card.soon .ph .display .red { -webkit-text-stroke: 1px var(--red); color: transparent; }
.mode-blueprint .card.soon .soon-tag { color: var(--red); }
/* касание: карточка в центре экрана заливается фото */
@media (hover: none) {
  .mode-blueprint .card.fill .ph img.alt { opacity: 1; clip-path: circle(75% at 50% 50%); }
}
/* тач: без «залипшего» ховера — смена фото и зум только для мыши (заливка в «Чертеже» — по .fill) */
@media (hover: none), (pointer: coarse) {
  .catalog:not(.mode-blueprint) .card:hover .ph img.alt { opacity: 0; }
  .mode-blueprint .card:not(.fill):hover .ph img.alt { opacity: 0; clip-path: circle(0% at 50% 50%); }
  .catalog .card:hover .ph img:not(.zoom) { transform: none; }
  .catalog .card:hover .ph img.main.zoom { transform: scale(var(--z, 1)); }
}

/* размерные линии и выноски */
.bp { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: var(--red); font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.bp > * { opacity: 0; transition: opacity .3s; }
.mode-blueprint .bp > * { opacity: 1; }
.bp span { white-space: nowrap; }

.bp .dim { position: absolute; background: var(--red); transition: clip-path .9s cubic-bezier(.7,0,.2,1), opacity .3s; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.bp .dim::before, .bp .dim::after { content: ''; position: absolute; background: var(--red); }
.bp .dim > span { position: absolute; left: 50%; top: 50%; background: #fff; padding: 2px 6px; }

.bp .dim-h { left: 26px; right: 26px; top: 28px; height: 1px; clip-path: inset(-20px 50% -20px 50%); }
.bp .dim-h::before, .bp .dim-h::after { top: -6px; width: 1px; height: 13px; transform: rotate(45deg); }
.bp .dim-h::before { left: 0; } .bp .dim-h::after { right: 0; }
.bp .dim-h > span { transform: translate(-50%, -50%); }

.bp .dim-v { top: 44px; bottom: 74px; right: 26px; width: 1px; clip-path: inset(50% -20px 50% -20px); }
.bp .dim-v::before, .bp .dim-v::after { left: -6px; width: 13px; height: 1px; transform: rotate(45deg); }
.bp .dim-v::before { top: 0; } .bp .dim-v::after { bottom: 0; }
.bp .dim-v > span { writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); padding: 6px 2px; }

.mode-blueprint .bp .dim-h, .mode-blueprint .bp .dim-v { clip-path: inset(-20px -20px -20px -20px); }

/* выноски к деталям (точки — из hotspots главного кадра) */
.bp .lead { position: absolute; top: var(--y); height: 1px; transition-delay: calc(var(--i, 0) * 70ms + 400ms + var(--k) * 120ms); }
.bp .lead.l { left: 26px; width: calc(var(--x) - 26px); }
.bp .lead.r { left: var(--x); right: 38px; }
.bp .lead i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transition: transform .7s cubic-bezier(.7,0,.2,1); transition-delay: inherit; }
.bp .lead.l i { transform-origin: right; } .bp .lead.r i { transform-origin: left; }
.mode-blueprint .bp .lead i { transform: scaleX(1); }
.bp .lead b { position: absolute; top: -4px; width: 9px; height: 9px; border: 1px solid var(--red); border-radius: 50%; background: #fff; }
.bp .lead b::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--red); }
.bp .lead.l b { right: -4px; } .bp .lead.r b { left: -4px; }
.bp .lead span { position: absolute; bottom: 5px; background: #fff; padding: 2px 5px; }
.bp .lead.l span { left: 0; } .bp .lead.r span { right: 0; }
.bp .lead.lo span { bottom: auto; top: 6px; }
/* длинная подпись выноски не вылезает за край карточки: переносится в пределах ширины чертежа */
.bp .lead span { width: max-content; max-width: calc(100cqi - 64px); white-space: normal; line-height: 1.25; }
.bp .lead em { font-style: normal; color: var(--ink); }
.bp .lead s { text-decoration: none; }

/* штамп чертежа */
.bp .stamp {
  position: absolute; right: 10px; bottom: 10px; display: grid; grid-template-columns: auto auto;
  background: #fff; border-top: 1px solid var(--red); border-left: 1px solid var(--red);
  color: var(--ink); font-size: 9px; transform: translateY(8px); transition: opacity .4s, transform .6s;
  transition-delay: calc(var(--i, 0) * 70ms + 500ms);
}
.mode-blueprint .bp .stamp { transform: none; }
.bp .stamp span { padding: 5px 7px; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); }
.bp .stamp span:nth-child(2) { color: var(--red); }
.bp .stamp span:nth-child(even) { border-right: 0; }

/* при наведении выноски уступают фото */
.mode-blueprint .card.fill .bp .lead span { opacity: .9; }
@media (hover: hover) and (pointer: fine) { .mode-blueprint .card:hover .bp .lead span { opacity: .9; } }

/* ---------- режим «Образы» ---------- */
.looks { gap: clamp(64px, 9vw, 140px); }
.look { position: relative; padding-top: 18px; border-top: 1px solid var(--ink); }
.look:nth-child(even) { grid-template-columns: 1fr 1.3fr; }
.look:nth-child(even) .strip { order: 2; }
.look .strip { align-items: stretch; }
.look .strip .big { position: relative; display: block; aspect-ratio: 2/3; overflow: hidden; background: #ddd; }
.look .strip .big img { position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(.2,.7,.1,1); }
@media (hover: hover) and (pointer: fine) { .look .strip .big:hover img { transform: scale(1.04); } }
.look .strip .big .tag { position: absolute; left: 12px; top: 12px; color: #fff; mix-blend-mode: difference; }
.look .strip .side { grid-template-rows: 1fr 1fr; }
.look .strip figure { position: relative; overflow: hidden; background: #ddd; }
.look .strip figure img { position: absolute; inset: 0; }

.look .info { position: sticky; top: calc(var(--head) + 110px); display: grid; gap: 18px; align-content: start; }
.look .num { font-size: clamp(90px, 14vw, 240px); line-height: .78; color: transparent; -webkit-text-stroke: 1px var(--ink); letter-spacing: -.04em; }
.look h2 { overflow-wrap: anywhere; }
.look dl { border-top: 1px solid var(--ink); }
.look dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.look dt { color: var(--concrete); padding-top: 3px; }
.look dd ul { list-style: none; display: grid; gap: 4px; }
.look dd li { position: relative; padding-left: 18px; }
.look dd li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--red); }
.look dd .muted { display: block; margin-top: 4px; }
.look .u { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .3s; }
@media (hover: hover) and (pointer: fine) { .look .u:hover { color: var(--red); } }
.look .btn { justify-self: start; margin-top: 6px; }
/* состав образа — ссылки на вещи */
.look-items { list-style: none; border-top: 1px solid var(--ink); }
.look-items a { display: grid; grid-template-columns: 44px 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); transition: color .3s; }
.look-items img { width: 44px; height: 58px; object-fit: cover; background: #ddd; }
.look-items b { font-weight: 500; color: var(--red); }
.look-items span:not(.mono) { font-size: 14px; line-height: 1.3; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .look-items a:hover { color: var(--red); } }

/* ---------- пусто ---------- */
.cat-empty { padding: 40px var(--pad) 140px; display: grid; gap: 18px; justify-items: start; }
.cat-empty .display { font-size: clamp(40px, 8vw, 120px); }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .cat-tools { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
}
@media (max-width: 900px) {
  .cat-head .top .hide-s { display: none; }
  .cat-tools { position: static; margin-bottom: 24px; gap: 10px; align-items: stretch; flex-wrap: nowrap; }
  .cat-tools .filters { flex-direction: column; flex-wrap: nowrap; gap: 10px; min-width: 0; }
  .fgroup { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; }
  .fgroup::-webkit-scrollbar { display: none; }
  .fgroup > .lbl, .fgroup .seg button { scroll-snap-align: start; }
  .fgroup .seg button:last-of-type { scroll-snap-align: end; }
  /* отступ справа после последней кнопки (паддинг конца у скролл-контейнера не везде учитывается) */
  .fgroup::after { content: ''; flex: 0 0 1px; margin-left: -13px; } /* гасит gap: справа остаётся ровно паддинг --pad */
  .fgroup .seg { max-width: none; } /* иначе сегмент сжимается до ширины экрана, а кнопки вылезают за его рамку */
  /* затухание у края, если ряд можно прокрутить (классы ставит catalog.js) */
  .fgroup.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .fgroup.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
  .fgroup.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
  .fgroup .lbl { width: 66px; }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .cat-row-h .hide-s { display: none; }
  .look-items a { grid-template-columns: 40px 48px 1fr; }
  .look-items a > .mono:last-child { grid-column: 3; }
  .catalog .card .meta { flex-direction: column; gap: 4px; }
  .cat-tools .seg button { padding: 10px 11px; }
  .seg-mode { flex: 1; }
  .seg-mode button { flex: 1; }

  .bp { font-size: 8px; }
  .bp .dim-h { left: 18px; right: 18px; top: 22px; }
  .bp .dim-v { right: 18px; top: 36px; bottom: 58px; }
  .bp .lead.l { left: 18px; width: calc(var(--x) - 18px); }
  .bp .lead.r { right: 26px; }
  .bp .lead s { display: none; }
  .bp .stamp { font-size: 7px; right: 8px; bottom: 8px; }
  .bp .stamp span { padding: 3px 4px; }
  .bp .stamp span:nth-child(n+3) { display: none; }
  .card.soon .soon-tag { font-size: 8px; left: 8px; bottom: 8px; }

  .look, .look:nth-child(even) { grid-template-columns: 1fr; }
  .look:nth-child(even) .strip { order: 0; }
  .look .info { position: relative; top: auto; padding-top: 8px; }
  .look .info > * { position: relative; z-index: 1; }
  .look .info .num { font-size: 22vw; } /* номер образа — отдельной строкой: не перекрывает заголовок и подпись */
  .look dl > div { grid-template-columns: 90px 1fr; gap: 10px; }
  .look .btn { justify-self: stretch; }
}
@media (max-width: 600px) {
  .cat-head h1 { font-size: 13.2vw; } /* «ИЗДЕЛИЯ» ≈ 6.6em — влезает в 320–600px без переноса */
}

@media (prefers-reduced-motion: reduce) {
  .bp *, .bp, .catalog .card .ph img, .card.soon.flash .ph, .card.soon.flash .meta { transition: none !important; animation: none !important; }
  .card.soon.flash .ph { box-shadow: inset 0 0 0 4px var(--red); }
}