/* =====================================================================
   gotovye.css — раздел "Готовые изделия" (views/gotovye-izdeliya.pug,
   views/gotovye-izdeliya-product.pug).

   Сетка карточек — обычный адаптивный CSS-grid (работает без JS, крауле
   и содержимое доступно всегда — см. routes/gotovye-izdeliya.js). Если JS
   доступен, gotovye-showcase.js переключает .gotovye-grid в masonry-режим
   (класс .is-masonry, абсолютное позиционирование карточек) и добавляет
   FLIP-перестройку при смене фильтра + полноэкранный лайтбокс —
   см. docs/gotovye-izdeliya.md §1/§3.

   Навигационный синий сайта — #3b5473 (см. product.css / krepeg.css).
   ===================================================================== */

.gotovye{
  padding-top: 20px;
  padding-bottom: 40px;
}
.gotovye__intro{
  max-width: 760px;
  color: #555;
  margin-bottom: 20px;
}
.gotovye__intro a{
  color: #3b5473;
}

/* ---------- фильтр-чипы ---------- */
.gotovye-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.gotovye-filter__chip{
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid #d8dde2;
  border-radius: 999px;
  background: #fff;
  color: #3b5473;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gotovye-filter__chip:hover{
  border-color: #3b5473;
}
.gotovye-filter__chip.is-active{
  background: #3b5473;
  border-color: #3b5473;
  color: #fff;
}

/* ---------- сетка карточек ----------
   --gotovye-gap/--gotovye-col читаются в gotovye-showcase.js
   (getComputedStyle), чтобы JS-раскладка не расходилась с CSS-отступами. */
.gotovye-grid{
  --gotovye-gap: 20px;
  --gotovye-col: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gotovye-col), 1fr));
  gap: var(--gotovye-gap);
}
@media (max-width: 800px){
  .gotovye-grid{ --gotovye-gap: 12px; }
}
/* Masonry-режим (включает JS после первой раскладки) — карточки становятся
   абсолютно спозиционированными, JS выставляет им width/transform инлайном. */
.gotovye-grid.is-masonry{
  display: block;
  position: relative;
}
.gotovye-grid.is-masonry .gotovye-card{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.gotovye-grid.is-masonry .gotovye-card.is-entering{
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.gotovye-grid.is-masonry .gotovye-card.is-leaving{
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .3s ease;
}
.gotovye-grid.is-masonry .gotovye-card.is-culled{
  display: none;
}
@media (prefers-reduced-motion: reduce){
  .gotovye-grid.is-masonry .gotovye-card{ transition: none; }
}

/* Редизайн карточки (2026-08-20, мокап "Карточка-бирка", согласован в чате) —
   цена живёт биркой на фото, а не строкой текста в подвале; номер позиции
   (артикул) в углу — реальный id товара; уголки видоискателя на наведении;
   материал/размер теперь читаются с карточки. Тень вместо рамки — на белой
   странице отделяет карточку без лишней визуальной тяжести. */
.gotovye-card{
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20,30,45,.06), 0 10px 28px -14px rgba(20,30,45,.18);
  transition: box-shadow .2s ease, transform .2s ease;
}
.gotovye-card:hover{
  box-shadow: 0 4px 10px rgba(20,30,45,.08), 0 22px 44px -16px rgba(20,30,45,.28);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .gotovye-card{ transition: box-shadow .2s ease; }
  .gotovye-card:hover{ transform: none; }
}
.gotovye-card__media{
  display: block;
  position: relative;
  background: #f4f5f6;
}
/* лёгкий градиент снизу — чтобы бирка цены/номер читались на любом фото */
.gotovye-card__media::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(10,16,22,.32), transparent);
  pointer-events: none;
}
/* номер позиции — реальный id товара, как артикул в каталоге крепежа, не
   декоративная цифра */
.gotovye-card__no{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; color: #fff; letter-spacing: .02em;
  background: rgba(12,18,26,.4); border-radius: 4px; padding: 3px 7px;
}
/* видоискатель — уголки проявляются по наведению, отсылка к чертежу на
   странице товара (у второй карточки на витрине это буквально чертёж) */
.gotovye-card__corner{
  position: absolute; width: 16px; height: 16px; z-index: 2;
  border: 2px solid #fff; opacity: 0; transition: opacity .18s ease, transform .18s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  pointer-events: none;
}
.gotovye-card__corner--tl{ top: 8px; left: 8px; border-right: none; border-bottom: none; transform: translate(4px,4px); }
.gotovye-card__corner--tr{ top: 8px; right: 8px; border-left: none; border-bottom: none; transform: translate(-4px,4px); }
.gotovye-card__corner--bl{ bottom: 8px; left: 8px; border-right: none; border-top: none; transform: translate(4px,-4px); }
.gotovye-card__corner--br{ bottom: 8px; right: 8px; border-left: none; border-top: none; transform: translate(-4px,-4px); }
.gotovye-card:hover .gotovye-card__corner{ opacity: .85; transform: translate(0,0); }
/* бирка цены — сидит на фото с отступом (не свисает за край — так был баг с
   "приклеиванием" к границе фото/подвала на первой версии мокапа) */
.gotovye-card__tag{
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  background: #3b5473; color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  padding: 6px 12px; border-radius: 5px;
  box-shadow: 0 3px 8px -2px rgba(20,30,45,.35);
}
/* Пропорции обложки — квантованы в 4 класса на сервере (ratioClassOf() в
   routes/gotovye-izdeliya.js), не 1-в-1 из width/height, см.
   docs/gotovye-izdeliya.md §3 "Пропорции карточек". */
.gotovye-card--wide .gotovye-card__media{ aspect-ratio: 3 / 2; }
.gotovye-card--square .gotovye-card__media{ aspect-ratio: 1 / 1; }
.gotovye-card--tall .gotovye-card__media{ aspect-ratio: 3 / 4; }
.gotovye-card--vtall .gotovye-card__media{ aspect-ratio: 2 / 3; }
.gotovye-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .4s ease;
}
.gotovye-card__img.is-loaded,
.gotovye-card__img:not([loading]){
  opacity: 1;
}
.gotovye-card__img--placeholder{
  height: 100%;
  min-height: 160px;
  background: #eef0f2;
  opacity: 1;
}
.gotovye-card__media .zoom-cue{
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(20,30,40,.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.gotovye-card:hover .zoom-cue{ opacity: 1; transform: translateY(0); }

/* ---------- hover-scrub: карточка листает фото по наведению курсора, как на
   Ozon/Wildberries (docs/gotovye-izdeliya.md §3, мокап "Фотолента изделий").
   Только на мыши (public/scripts/gotovye-showcase.js слушает mousemove, не
   pointermove/touch) — на тачскрине карточка ведёт себя как раньше, тап
   сразу открывает лайтбокс. ---------- */
/* top:40px, не 8px — ниже .gotovye-card__no (номер позиции), иначе полоски
   прогресса при наведении наезжали бы на бирку с артикулом. */
.gotovye-card__segments{
  position: absolute; top: 40px; left: 8px; right: 8px; z-index: 2;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.gotovye-card__media:hover .gotovye-card__segments{ opacity: 1; }
.gotovye-card__segments i{ flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.5); }
.gotovye-card__segments i.is-active{ background: #fff; }

/* Подсказка и счётчик делят один и тот же правый нижний угол — они никогда
   не видны одновременно (подсказка гаснет ровно тогда, когда включается
   счётчик), поэтому конфликта с биркой цены слева нет: та занимает левый
   нижний угол одна. */
.gotovye-card__hint,
.gotovye-card__counter{
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-size: 11px; color: #fff;
  background: rgba(20,26,32,.6); border-radius: 999px; padding: 4px 9px;
  transition: opacity .15s ease; pointer-events: none;
}
.gotovye-card__counter{ opacity: 0; }
.gotovye-card__media:hover .gotovye-card__hint{ opacity: 0; }
.gotovye-card__media:hover .gotovye-card__counter{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .gotovye-card__segments, .gotovye-card__hint, .gotovye-card__counter, .gotovye-card__corner{ transition: none; }
}

/* Подвал (группа + "Подробнее") прижат к низу карточки через margin-top:auto
   у .gotovye-card__foot внутри флекс-колонки — не к низу текста, а именно
   карточки, с отступом от края. Заголовку выделено ровно 2 строки
   (line-clamp + min-height) — короткий и длинный заголовок не сбивают
   стартовую позицию остального контента. Высота самой карточки при этом
   всё равно разная у разных карточек — её задаёт фото (ratioClass выше),
   не текстовый блок. */
.gotovye-card__body{
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
}
.gotovye-card__title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  min-height: 39px;
  margin-bottom: 8px;
}
.gotovye-card__title:hover{
  color: #3b5473;
}
.gotovye-card__specs{
  font-size: 12px;
  color: #888;
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gotovye-card__specs span + span::before{ content: " · "; color: #ddd; }

.gotovye-card__foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gotovye-card__group{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #3b5473;
  background: #eaeff4;
  border-radius: 999px;
  padding: 4px 10px;
}
.gotovye-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  transition: gap .15s ease, color .15s ease;
}
.gotovye-card__cta svg{ width: 13px; height: 13px; transition: transform .15s ease; }
.gotovye-card:hover .gotovye-card__cta{ color: #3b5473; gap: 7px; }
.gotovye-card:hover .gotovye-card__cta svg{ transform: translateX(2px); }
@media (prefers-reduced-motion: reduce){
  .gotovye-card__cta, .gotovye-card__cta svg{ transition: none; }
}

/* ---------- лайтбокс (полноэкранный просмотр фото карточки) ----------
   Разворот из точки клика — FLIP-приём: gotovye-showcase.js меряет
   getBoundingClientRect миниатюры и рамки, ставит стартовый transform
   без transition, затем в следующем кадре включает transition и убирает
   transform — браузер анимирует "разворот". Тёмная подложка не завязана
   на тему сайта (нет тёмной темы у sm-pm) — фиксированная палитра. */
.gotovye-lb{
  --lb-backdrop: rgba(10,14,18,.86);
}
.gotovye-lb__backdrop{
  position: fixed; inset: 0;
  background: var(--lb-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1100;
}
.gotovye-lb__backdrop.is-open{ opacity: 1; pointer-events: auto; }

.gotovye-lb__stage{
  position: fixed; inset: 0;
  z-index: 1101;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.gotovye-lb__stage.is-open{ opacity: 1; pointer-events: auto; }

.gotovye-lb__frame{
  position: relative;
  max-width: 92vw;
  max-height: 78vh;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.55);
  border-radius: 4px;
  overflow: hidden;
  background: #1b2126;
  transform-origin: top left;
  will-change: transform;
}
.gotovye-lb__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1b2126;
}

.gotovye-lb__caption{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1102;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px 22px;
  color: #f3f4f2;
  background: linear-gradient(to top, rgba(6,7,8,.75), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.gotovye-lb__caption.is-open{ opacity: 1; pointer-events: auto; }
.gotovye-lb__group{
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9db3c6;
  margin: 0 0 4px;
}
.gotovye-lb__caption h3{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.gotovye-lb__price{
  font-size: 15px;
  color: #f0d9b8;
  margin: 0;
}
.gotovye-lb__cta{
  display: inline-block;
  align-self: flex-end;
  padding: 10px 20px;
  background: #3b5473;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.gotovye-lb__cta:hover{ background: #2e4359; color: #fff; }

.gotovye-lb__btn{
  position: fixed;
  z-index: 1103;
  background: rgba(20,26,32,.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, background .15s ease;
}
.gotovye-lb__btn:hover{ background: rgba(20,26,32,.8); }
.gotovye-lb__btn.is-open{ opacity: 1; pointer-events: auto; }
.gotovye-lb__close{ top: 20px; right: 22px; }
.gotovye-lb__prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.gotovye-lb__next{ right: 20px; top: 50%; transform: translateY(-50%); }

.gotovye-lb__counter{
  position: fixed;
  top: 24px; left: 26px;
  z-index: 1103;
  font-size: 13px;
  color: #eef1f0;
  background: rgba(20,26,32,.55);
  border-radius: 999px;
  padding: 6px 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.gotovye-lb__counter.is-open{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .gotovye-lb__backdrop, .gotovye-lb__stage, .gotovye-lb__caption,
  .gotovye-lb__btn, .gotovye-lb__counter, .gotovye-lb__frame{
    transition: none !important;
  }
}

/* ---------- страница товара ---------- */
.gotovye-product{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 10px;
}
.gotovye-product__gallery{
  flex: 1 1 420px;
  max-width: 480px;
}
.gotovye-product__main{
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f5f6;
  outline-offset: 3px;
}
.gotovye-product__main:focus-visible{
  outline: 2px solid #3b5473;
}
.gotovye-product__main-img{
  width: 100%;
  height: auto;
  display: block;
  transition: opacity .15s ease;
}
.gotovye-product__main.is-switching .gotovye-product__main-img{
  opacity: .4;
}
.gotovye-product__main--placeholder{
  height: 320px;
}

.gotovye-product__counter{
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-size: 12px; color: #fff;
  background: rgba(20,26,32,.6); border-radius: 999px; padding: 4px 10px;
}
.gotovye-product__arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,26,32,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.gotovye-product__main:hover .gotovye-product__arrow,
.gotovye-product__arrow:focus-visible{ opacity: 1; }
.gotovye-product__arrow:hover{ background: rgba(20,26,32,.85); }
.gotovye-product__arrow--prev{ left: 10px; }
.gotovye-product__arrow--next{ right: 10px; }

.gotovye-product__thumbs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.gotovye-product__thumb{
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f4f5f6;
}
.gotovye-product__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .7;
  transition: opacity .15s ease;
}
.gotovye-product__thumb.is-active{
  border-color: #3b5473;
}
.gotovye-product__thumb.is-active img,
.gotovye-product__thumb:hover img{
  opacity: 1;
}
.gotovye-product__thumb:focus-visible{
  outline: 2px solid #3b5473;
  outline-offset: 2px;
}
.gotovye-product__thumb-tag{
  position: absolute; left: 3px; bottom: 3px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #777;
}
.gotovye-product__thumb-tag svg{ width: 11px; height: 11px; }
.gotovye-product__thumb-tag--blueprint{ color: #3b5473; }
.gotovye-product__thumb-tag--install{ color: #a3672e; }

@media (prefers-reduced-motion: reduce){
  .gotovye-product__main-img, .gotovye-product__arrow, .gotovye-product__thumb img{ transition: none; }
}
.gotovye-product__info{
  flex: 1 1 360px;
}
.gotovye-product__group{
  display: inline-block;
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
}
.gotovye-product__price{
  font-size: 22px;
  font-weight: 700;
  color: #3b5473;
  margin-bottom: 16px;
}
.gotovye-product__specs{
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
}
.gotovye-product__specs td{
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.gotovye-product__specs td:first-child{
  color: #888;
  width: 40%;
}
.gotovye-product__description p{
  margin-bottom: 12px;
  line-height: 1.6;
  color: #333;
}
.gotovye-product__cta{
  display: inline-block;
  padding: 12px 28px;
  background: #3b5473;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  margin: 8px 0 20px;
}
.gotovye-product__cta:hover{
  background: #2e4359;
}
.gotovye-product__crosssell{
  font-size: 14px;
  color: #555;
}
.gotovye-product__crosssell a{
  color: #3b5473;
}

@media (max-width: 767px){
  .gotovye-product{
    flex-direction: column;
  }
  .gotovye-product__gallery{
    max-width: 100%;
  }
}