/* Галерея моделей клиентов на вешалке */
.hanger-gallery{--w:clamp(158px,15.5vw,248px);--pad:36px;background:linear-gradient(180deg,#EEF1F8 0%,var(--paper) 62%,#E9EDF5 100%);overflow:hidden}
.hg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:28px}
.hg-head h2{margin:10px 0 0}
.hg-head p{max-width:470px;color:var(--muted);margin:0}
.hg-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hg-filters button,.hg-d-views button{min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font:500 13px/1.2 inherit;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.hg-filters button:hover,.hg-d-views button:hover{border-color:var(--ink)}
.hg-filters button[aria-pressed="true"],.hg-d-views button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}

.hg-stage{position:relative}
.hg-rail{position:relative;z-index:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;outline:none;padding-bottom:18px}
.hg-rail::-webkit-scrollbar{display:none}
.hg-rail:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.hg-rail.is-dragging{cursor:grabbing}
.hg-rail.is-dragging .hg-piece{pointer-events:none}
/* штанга: проходит через изгиб крючков (кончик крючка на 0,9% высоты кадра) */
.hg-rod{position:absolute;left:0;right:0;height:7px;top:calc(var(--pad) + var(--w) * 1.368 * .028);border-radius:4px;
  background:linear-gradient(180deg,#F4F6FA 0%,#B7BFCC 45%,#7D8696 100%);box-shadow:0 6px 10px -4px rgba(16,27,53,.35);z-index:0}
.hg-track{position:relative;display:flex;gap:clamp(4px,1vw,14px);list-style:none;margin:0;padding:var(--pad) 0 0;width:max-content;z-index:1}
.hg-track::before{content:"";position:absolute;inset:0}
.hg-item{flex:0 0 var(--w)}
.hg-item[hidden]{display:none}
.hg-piece{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit}
.hg-swing{display:block;transform-origin:50% 1.4%;animation:hg-swing var(--d,6s) ease-in-out var(--dl,0s) infinite alternate;transition:transform .45s var(--ease)}
.hg-swing img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(16,27,53,.16));-webkit-user-drag:none;user-select:none}
.hg-piece:hover .hg-swing,.hg-piece:focus-visible .hg-swing{animation-play-state:paused;transform:translateY(-6px) scale(1.035)}
.hg-piece:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
@keyframes hg-swing{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.hg-tag{display:flex;flex-direction:column;gap:2px;margin:6px auto 0;width:max-content;max-width:92%;padding:7px 11px;background:white;border:1px solid var(--line);border-radius:4px;font-size:12px;line-height:1.25;text-align:center;box-shadow:0 2px 0 rgba(16,27,53,.04)}
.hg-tag b{font-weight:600;color:var(--ink)}
.hg-tag span{color:var(--muted)}

.hg-foot{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:22px}
.hg-foot .fine{max-width:640px;margin:0}
.hg-controls,.hg-d-nav{display:flex;gap:8px;flex-shrink:0}
.hg-btn{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:white;color:var(--ink);font-size:16px;cursor:pointer;transition:border-color .18s,background .18s}
.hg-btn:hover{border-color:var(--ink)}
.hg-play{font-size:12px;letter-spacing:-1px}

/* карточка модели */
.hg-dialog{width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:10px;background:white;color:var(--ink);overflow:auto}
.hg-dialog[open]{display:grid;grid-template-columns:1.05fr 1fr}
.hg-dialog::backdrop{background:rgba(16,27,53,.55);backdrop-filter:blur(3px)}
.hg-d-stage{position:relative;background:linear-gradient(180deg,#EEF1F8,#F7F8FC);display:flex;align-items:flex-start;justify-content:center;padding:28px 24px 48px;min-height:420px}
.hg-d-stage img{width:min(100%,420px);height:auto;filter:drop-shadow(0 22px 22px rgba(16,27,53,.18))}
.hg-d-stage img.is-in{animation:hg-turn .5s var(--ease)}
@keyframes hg-turn{from{opacity:0;transform:perspective(900px) rotateY(-24deg) translateX(-14px)}to{opacity:1;transform:none}}
.hg-d-info{position:relative;display:flex;flex-direction:column;gap:16px;padding:44px 36px 36px}
.hg-d-info h3{font-size:clamp(28px,3vw,40px);margin:0}
.hg-d-info .muted{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.hg-d-views{display:flex;flex-wrap:wrap;gap:8px}
.hg-d-info .btn{margin-top:auto;align-self:flex-start}
.hg-d-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border:0;border-radius:50%;background:var(--paper);font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}

@media (max-width:760px){
  .hg-head{flex-direction:column;align-items:flex-start;gap:14px}
  .hg-foot{flex-direction:column;align-items:flex-start}
  .hg-dialog[open]{grid-template-columns:1fr}
  .hg-d-stage{min-height:0;padding:20px 16px 44px}
  .hg-d-stage img{width:min(72%,300px)}
  .hg-d-info{padding:24px 20px 24px}
}
@media (prefers-reduced-motion:reduce){
  .hg-swing{animation:none}
  .hg-swing,.hg-filters button,.hg-btn{transition:none}
  .hg-d-stage img.is-in{animation:none}
}