/* ============ окна с экранами PDP ============
   Окно браузера со скриншотом платформы и чипы-переключатели над ним.
   Высота окна фиксирована пропорцией 3:2 (так сняты экраны платформы),
   поэтому при переключении разделов ничего не скачет: картинка вписывается
   в неизменную рамку (object-fit:contain), а смена идёт кроссфейдом двух слоёв.
*/

/* ---------- каркас окна ---------- */
.shot .win{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;box-shadow:0 50px 110px -30px rgba(0,0,0,.8);display:flex;flex-direction:column}
.sec.light .shot .win{border-color:#dcdcdc;box-shadow:0 40px 90px -30px rgba(0,0,0,.3)}
.chrome{height:36px;background:#151516;border-bottom:1px solid #222;display:flex;align-items:center;padding:0 12px;gap:10px;flex:none}
.sec.light .chrome{background:#ececec;border-color:#dcdcdc}
.chrome .dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#3a3a3c;margin-right:6px}
.sec.light .chrome .dots i{background:#c5c5c5}
.chrome .url{flex:1;max-width:320px;margin:0 auto;background:#0d0d0d;border:1px solid #222;border-radius:7px;height:23px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#6e6e73;letter-spacing:.01em}
.sec.light .chrome .url{background:#fff;border-color:#dcdcdc;color:#8a8a8a}
.chrome .url::before{content:"🔒";font-size:9px;opacity:.6;margin-right:5px}

/* экран: неизменная рамка + два слоя картинки для кроссфейда */
.view{position:relative;overflow:hidden;background:#fff;aspect-ratio:3/2}
.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .4s var(--ease)}
.view img.off{opacity:0}
@media (prefers-reduced-motion:reduce){.view img{transition:none}}

/* ---------- чипы над окном ---------- */
.shot{width:100%}
.shot .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.shot .chips button{border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.shot .chips button:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.shot .chips button.on{background:#fff;color:#000;border-color:#fff}
.sec.light .shot .chips button{border-color:rgba(0,0,0,.14);color:var(--light-ink-2)}
.sec.light .shot .chips button:hover{color:var(--light-ink);border-color:rgba(0,0,0,.35)}
.sec.light .shot .chips button.on{background:#000;color:#fff;border-color:#000}