/* ===== Карточка изделия (product.html) — дополняет раздел «карточка изделия» в style.css ===== */

html.pg-lock, html.pg-lock body { overflow: hidden; }
.nw { white-space: nowrap; } /* «ВНИИТЭ-ПТ» не рвётся на дефисе */

/* сетка: галерея | липкая колонка; детали (переосмысление, паспорт) — под галереей */
.product { align-items: start; grid-template-areas: "g i" "d i"; grid-template-rows: auto 1fr; }
.gallery-wrap { position: relative; min-width: 0; grid-area: g; }
.pinfo { grid-area: i; }
.pdetail { grid-area: d; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--pad); align-items: start; margin-top: clamp(40px, 5vw, 72px); scroll-margin-top: calc(var(--head) + 24px); }
.pdetail > * { min-width: 0; }
.pdetail .spec { margin-top: 0; }

/* --- галерея --- */
.gallery { grid-template-columns: 1fr 1fr; }
.gallery figure { aspect-ratio: 2 / 3; cursor: none; }
.gallery figure.g-hero, .gallery figure.g-wide { grid-column: 1 / -1; }
.gallery figure img { height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.1,1); }
@media (hover: hover) and (pointer: fine) { .gallery figure:hover img { transform: scale(1.015); } }
.gallery figcaption {
  position: absolute; left: 10px; bottom: 10px; color: #fff; mix-blend-mode: difference;
  font-size: 11px; pointer-events: none;
}
.g-count { display: none; }

/* --- метки-выноски --- */
.hotspot { z-index: 2; cursor: none; transition: background .3s, transform .3s; }
.hotspot::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; } /* увеличенная зона касания */
.hotspot:hover, .hotspot.show, .hotspot:focus-visible { z-index: 3; background: var(--ink); }
.hotspot:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.hotspot .tip { font-family: var(--mono); letter-spacing: .04em; white-space: normal; width: max-content; max-width: 150px; line-height: 1.35; }
.gallery figure.g-hero .hotspot .tip { max-width: 260px; }
.hotspot:focus-visible .tip { opacity: 1; }
/* метка у правого края — выноска влево */
.hotspot.l .tip { left: auto; right: 30px; border-left: 0; border-right: 2px solid var(--red); }
.hotspot.l .tip::before { right: auto; left: 100%; }
@media (hover: none) { .hotspot { cursor: pointer; } .gallery figure { cursor: pointer; } }

/* --- правая колонка: прилипает под шапкой и целиком помещается в экран --- */
.pinfo { gap: 18px; min-width: 0; top: calc(var(--head) + 20px); }
.pinfo > * { min-width: 0; }
.crumbs { display: flex; gap: 8px; color: var(--concrete); white-space: nowrap; }
.crumbs a:hover { color: var(--red); }
.crumbs .t { margin-left: auto; }
.eyebrow { margin-top: 4px; }
.pinfo h1 { overflow-wrap: normal; white-space: nowrap; font-size: clamp(40px, 5vw, 80px); }
.more-link { color: var(--concrete); transition: color .3s; }
.more-link:hover { color: var(--red); }
/* низкий экран: колонка компактнее; если всё равно не влезла — JS добавляет .tight */
@media (min-width: 901px) and (max-height: 820px) {
  .pinfo { gap: 14px; top: calc(var(--head) + 14px); }
  .pinfo h1 { font-size: clamp(36px, 4vw, 64px); }
  .cta .order { padding: 18px 24px; }
  .src-link { grid-template-columns: 52px 1fr auto; }
  .src-link img, .src-link.none .ph { width: 52px; height: 64px; }
}
.pinfo.tight { gap: 10px; top: calc(var(--head) + 10px); }
.pinfo.tight .eyebrow, .pinfo.tight .cta .note, .pinfo.tight .src-link .k { display: none; }
.pinfo.tight h1 { font-size: clamp(32px, 3.4vw, 52px); }
.pinfo.tight .pname { margin-top: -4px; font-size: 17px; }
.pinfo.tight .src-link { grid-template-columns: 40px 1fr auto; padding-block: 4px; }
.pinfo.tight .src-link img, .pinfo.tight .src-link.none .ph { width: 40px; height: 50px; }
.meta-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; border-top: 1px solid var(--ink); padding-top: 12px; }
.meta-row .price { font-size: 13px; }
.pname { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; max-width: 32ch; margin-top: -8px; }
.looks-in a { border-bottom: 1px solid currentColor; transition: color .3s; }
.looks-in a:hover { color: var(--red); }
.gallery figure.is-mock { background: #F2F2F2; }

.block { display: grid; gap: 12px; }
.block-h { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ink); padding-top: 12px; }
.sizes button { transition: background .25s, color .25s, box-shadow .25s; }
@media (hover: hover) and (pointer: fine) {
  .sizes button:hover { background: rgba(17,17,17,.08); }
  .sizes button.on:hover { background: var(--ink); }
}
/* фокус ≠ «выбран»: выбранный — чёрная заливка, фокус — красная черта под кнопкой */
.sizes button:focus-visible { outline: none; box-shadow: 0 6px 0 -3px var(--red); }
.sizes button:not(.on):focus-visible { color: var(--red); }
.pm-panel h2:focus { outline: none; }

.cta { display: grid; gap: 10px; }
.cta .order { width: 100%; padding: 22px 26px; font-size: 13px; }
.cta .order:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cta .note { opacity: .7; justify-self: start; }

/* источник */
.src-link { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--ink); padding: 8px 14px 8px 8px; transition: background .35s, color .35s; }
.src-link img { width: 64px; height: 80px; object-fit: contain; background: #fff; filter: grayscale(1); transition: filter .4s; }
.src-link > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.src-link b { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.src-link .k { color: var(--concrete); font-size: 11px; }
.src-link .arr { font-family: var(--display); font-size: 22px; transition: transform .35s; }
a.src-link:hover { background: var(--ink); color: var(--paper); }
a.src-link:hover img { filter: none; }
a.src-link:hover .arr { transform: translateX(4px); color: var(--red); }
.src-link.none .ph { width: 64px; height: 80px; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 28px; color: var(--red);
  background: repeating-linear-gradient(45deg, #ddd 0 6px, #e6e4de 6px 12px); }

/* переосмысление */
.rethink { gap: 0; }
.rethink div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rethink div span:last-child { font-weight: 500; }
.rethink .rh { padding: 0 0 6px; color: var(--concrete); }
.rethink .rh span:last-child { font-weight: 400; }

/* паспорт / размеры */
.spec summary { cursor: none; }
.spec summary::-webkit-details-marker { display: none; }
.spec summary:hover { color: var(--red); }
.spec summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (hover: none) { .spec summary { cursor: pointer; } }
.pass { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 14px; }
.pass dt { color: var(--concrete); padding-top: 2px; }
.pass dd { justify-self: start; }
.size-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.size-tbl th, .size-tbl td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.size-tbl th { font-family: var(--mono); font-weight: 500; }

/* --- сравнение --- */
.cmp-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--pad); align-items: center; }
.cmp-grid > * { min-width: 0; }
.cmp-sec .compare { aspect-ratio: 6 / 5; cursor: ew-resize; }
@media (hover: hover) { .cmp-sec .compare { cursor: none; } }
.cmp-sec .compare .top img { object-position: center 28%; }
.compare .handle { transform: translateX(-1px); z-index: 2; }
.compare .handle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.compare .handle::after { font-size: 18px; transition: transform .3s; }
.compare.drag .handle::after { transform: translate(-50%, -50%) scale(.85); }
.compare .lbl { z-index: 2; }
.compare .lbl.l { left: 10px; }
.compare .lbl.r { right: 10px; }
.cmp-hint { margin-top: 10px; color: var(--concrete); }
.cmp-text { display: grid; gap: 18px; align-content: center; justify-items: start; }
.cmp-text h3 { font-size: clamp(32px, 4.6vw, 72px); }
.cmp-text p:not(.mono) { max-width: 46ch; }

.cmp-empty { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 6 / 5; border: 1px solid var(--ink); overflow: hidden; }
.cmp-empty .half { position: relative; overflow: hidden; }
.cmp-empty .half img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.cmp-empty .lbl { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; background: var(--paper); }
.cmp-empty .ph { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; outline-offset: -10px;
  background: repeating-linear-gradient(45deg, #ddd 0 10px, #e6e4de 10px 20px); border-left: 2px solid var(--red); }
.cmp-empty .ph .display { font-size: clamp(64px, 9vw, 140px); color: var(--red); }

/* --- другие изделия --- */
.more-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pad); }
.more-sec .sec-head .idx { margin-left: auto; margin-right: 16px; color: var(--concrete); }
/* линии под карточками ряда — на одной высоте: описание растягивается, черта прижата к низу */
.more-rail .card { width: auto; min-width: 0; display: flex; flex-direction: column; }
.more-rail .card .meta { flex: 1 0 auto; }
/* плитка образа: закрывает пустые колонки, фото по высоте ряда */
.look-tile[hidden] { display: none; }
.more-rail .look-tile .ph { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.more-rail .look-tile .ph img { object-position: center 30%; }
.more-rail .look-tile .meta { flex: 0 0 auto; }
.more-rail .look-tile h3 { color: var(--red); }
/* тач: без «залипшего» ховера (смена фото и зум — только для мыши) */
@media (hover: none), (pointer: coarse) {
  .card:hover .ph img.alt { opacity: 0; }
  .card:hover .ph img { transform: none; }
}
.pn { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(48px, 7vw, 100px); border-top: 1px solid var(--ink); }
.pn-a { display: grid; gap: 12px; padding: 22px 0; min-width: 0; }
.pn-a.next { text-align: right; border-left: 1px solid var(--ink); padding-left: 20px; }
.pn-a.prev { padding-right: 20px; }
.pn-a .pn-n { color: var(--concrete); font-size: 14px; }
.pn-a .display { font-size: clamp(22px, 3.6vw, 56px); transition: color .35s, transform .5s cubic-bezier(.2,.7,.1,1); overflow-wrap: anywhere; }
.pn-a.prev:hover .display { color: var(--red); transform: translateX(-8px); }
.pn-a.next:hover .display { color: var(--red); transform: translateX(8px); }

/* --- модалка заявки --- */
.pmodal { position: fixed; inset: 0; z-index: 150; display: grid; justify-items: end; }
.pmodal[hidden], .lightbox[hidden] { display: none; }
.pm-back { position: absolute; inset: 0; background: rgba(17,17,17,.55); }
.pm-panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--paper); border-left: 2px solid var(--red);
  padding: calc(var(--pad) + 6px) var(--pad); display: flex; flex-direction: column; gap: 18px; }
.pm-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.pm-top button { font-family: var(--mono); font-size: 12px; text-transform: uppercase; white-space: nowrap; }
.pm-top button:hover { color: var(--red); }
.pm-panel h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 18px 0 6px; }
.pm-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.pm-note { margin-top: auto; color: var(--concrete); line-height: 1.5; }
.pm-item { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 0; }
.pm-item img { width: 72px; height: 96px; object-fit: cover; background: #ddd; }
.pm-item div { display: grid; gap: 4px; }
.pm-item .mono:first-child { color: var(--concrete); }
.pm-size { display: grid; gap: 10px; }
.pm-size .mono .todo { margin-left: 8px; color: var(--concrete); }
.pm-msg { display: grid; gap: 8px; }
.pm-msg textarea { width: 100%; resize: none; border: 1px solid var(--ink); background: #fff; padding: 12px 14px; font: 15px/1.45 var(--body); color: var(--ink); }
.pm-msg textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.pm-actions { display: grid; gap: 8px; }
.pm-actions .btn { width: 100%; }
.btn.ch.is-off { opacity: .55; cursor: not-allowed; justify-content: space-between; outline-offset: 2px; }
.btn.ch.is-off:hover { color: inherit; }
.btn.ch.is-off::before { display: none; }
.btn.ch small { font-size: 10px; color: var(--red); }

/* --- лайтбокс --- */
.lightbox { position: fixed; inset: 0; z-index: 160; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; touch-action: pan-y pinch-zoom; }
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--pad); border-bottom: 1px solid rgba(239,237,231,.2); }
/* название — одной строкой с многоточием; счётчик и «Закрыть» не переносятся */
.lb-top .lb-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-top .lb-n, .lb-close { flex: 0 0 auto; white-space: nowrap; }
.lb-close { font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.lb-close:hover { color: var(--red); }
.lb-stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; } /* листание — горизонтальный сдвиг (js/slider.js) */
.lb-stage img { position: absolute; top: 16px; left: var(--pad); width: calc(100% - var(--pad) * 2); height: calc(100% - 32px); max-width: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border: 1px solid rgba(239,237,231,.5); border-radius: 50%;
  font-family: var(--display); font-size: 20px; display: grid; place-items: center; transition: background .3s, border-color .3s; }
.lb-prev { left: var(--pad); }
.lb-next { right: var(--pad); }
.lb-prev:hover, .lb-next:hover { background: var(--red); border-color: var(--red); }
.lightbox button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.lb-thumbs { display: flex; justify-content: center; gap: 8px; padding: 12px var(--pad) 18px; overflow-x: auto; }
.lb-thumbs button { width: 48px; flex-shrink: 0; opacity: .4; transition: opacity .3s; outline-offset: 2px; }
.lb-thumbs button.on { opacity: 1; box-shadow: 0 2px 0 var(--red); }
.lb-thumbs button:hover { opacity: .9; }
.lb-thumbs img { width: 48px; aspect-ratio: 2 / 3; object-fit: cover; }

/* ===== мобильная ===== */
@media (max-width: 1100px) {
  .more-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdetail { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .product { padding-top: calc(var(--head) + 8px); gap: 28px; grid-template-areas: "g" "i" "d"; grid-template-rows: auto; }
  .pdetail { margin-top: 0; gap: 22px; }
  .pinfo h1 { white-space: normal; font-size: clamp(40px, 12vw, 72px); }
  /* галерея — свайп-лента */
  .gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure { flex: 0 0 86%; scroll-snap-align: start; }
  .g-count { display: block; position: absolute; right: 10px; top: 10px; z-index: 3; padding: 4px 8px; background: var(--paper); pointer-events: none; }
  .gallery figure.g-hero .hotspot .tip { max-width: 150px; }

  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-sec .compare, .cmp-empty { aspect-ratio: 4 / 5; }
  .compare .lbl { font-size: 10px; max-width: 46%; }

  .more-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .more-rail::-webkit-scrollbar { display: none; }
  .more-rail .card { flex: 0 0 68%; scroll-snap-align: start; }
  .more-rail .look-tile { display: none; }
  .more-sec .sec-head { flex-wrap: wrap; }

  .lb-prev, .lb-next { top: auto; bottom: 86px; transform: none; width: 48px; height: 48px; background: rgba(17,17,17,.6); }
  .lb-stage img { left: 0; width: 100%; }
}
@media (max-width: 600px) {
  /* лайтбокс: только «×» (крупная зона касания), заголовок с многоточием */
  .lb-top { gap: 12px; padding: 10px 6px 10px var(--pad); }
  .lb-cw { display: none; }
  .lb-close { width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--body); font-size: 26px; line-height: 1; }
  .lb-top .lb-t { font-size: 11px; }
  /* заявка: панель на всю ширину, без полоски фона и красной линии слева */
  .pmodal { justify-items: stretch; }
  .pm-panel { width: 100%; border-left: 0; }
}
@media (max-width: 520px) {
  .pn { grid-template-columns: 1fr; }
  .pn-a.next { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .pass { grid-template-columns: 1fr; gap: 2px; }
  .pass dd { margin-bottom: 8px; }
  .src-link { grid-template-columns: 52px 1fr auto; }
  .src-link img, .src-link.none .ph { width: 52px; height: 66px; }
}

/* ===== без анимаций ===== */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  .img-rv { clip-path: none !important; }
  .hotspot::before { animation: none; }
  .gallery figure img, .pn-a .display { transition: none; }
}
.cmp-sec .sec-head .idx { white-space: nowrap; }