/* Витрина объектов: фильтры, сетка и окно объекта.
   Опирается на классы самого сайта (pcard, shot, bd, dist, meta, price, pay, btn),
   поэтому карточки выглядят так же, как на главной. */

#showcase { margin-top: 26px; }

.sc-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip, .sc-sel {
  font: 500 14px/1 inherit; color: #2a2724;
  background: #fff; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px;
  padding: 9px 14px; cursor: pointer; transition: .18s;
}
.sc-sel { border-radius: 10px; padding: 9px 12px; max-width: 220px; }
.sc-chip:hover { border-color: rgba(0, 0, 0, .32); }
.sc-chip.on { background: #14110e; border-color: #14110e; color: #fff; }

.sc-count { font-size: 14px; opacity: .65; margin: 6px 0 14px; }

.sc-card { cursor: pointer; transition: transform .18s, box-shadow .18s; }
.sc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .13); }

.sc-more { display: block; margin: 22px auto 0; }

/* окно объекта */
.sc-modal {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(14, 12, 10, .62); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px 24px; overflow: auto;
}
.sc-win {
  position: relative; width: min(860px, 100%); background: #fff;
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.sc-x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); font-size: 24px; line-height: 1; color: #14110e;
}
.sc-gal { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; }
.sc-gal img {
  width: 100%; max-width: 100%; height: 300px; object-fit: cover; flex: 0 0 100%;
  scroll-snap-align: start;
}
.sc-body { padding: 22px clamp(16px, 4vw, 30px) 30px; }
.sc-body h3 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 28px); }
.sc-body h4 { margin: 22px 0 8px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.sc-about { margin: 12px 0 0; line-height: 1.6; max-width: 62ch; }

.sc-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.sc-t th { text-align: left; font-weight: 600; opacity: .55; font-size: 13px; padding: 6px 8px 6px 0; }
.sc-t td { padding: 9px 8px 9px 0; border-top: 1px solid rgba(0, 0, 0, .08); font-variant-numeric: tabular-nums; }
.sc-t td:last-child { font-weight: 600; }

.sc-plan { margin: 0; padding-left: 18px; line-height: 1.75; }
.sc-fac { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-fac span {
  font-size: 13px; padding: 6px 11px; border-radius: 999px;
  background: rgba(0, 0, 0, .05);
}
.sc-note { font-size: 13px; opacity: .6; line-height: 1.55; margin: 14px 0 0; }
.sc-ask { margin-top: 18px; }

@media (max-width: 600px) {
  .sc-gal img { height: 210px; }
  .sc-sel { max-width: 100%; width: 100%; }
}