/* apps/content: product videos, installation guide, part passport. Builds on site.css tokens. */

/* Latin model codes inside Persian titles stay on one line (see the ltr_runs filter). */
.pv__cap b .ltr,.ig__step h3 .ltr,.pp__title .ltr{white-space:nowrap}
.ig__txt,.pp__text{overflow-wrap:anywhere}

/* ---- product videos (poster first, player on click) */
.pv__grid{display:grid;gap:18px}
.pv__item{margin:0;min-width:0}
.pv__item:only-child{max-width:860px}
.pv__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#1F2328;box-shadow:var(--sh)}
.pv__play{position:absolute;inset:0;display:block;color:#fff}
.pv__play img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pv__play .pv__fallback{object-fit:contain;background:#fff;padding:4% 0}
.pv__play:hover img{transform:scale(1.02)}
.pv__play:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:var(--r)}
.pv__btn{position:absolute;top:50%;left:50%;z-index:1;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);box-shadow:0 10px 30px -8px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.22);transition:transform .2s ease,background .2s ease}
.pv__btn svg{fill:#fff;margin-left:4px}
.pv__play:hover .pv__btn{transform:scale(1.07);background:var(--accent-d)}
.pv__dur{position:absolute;bottom:10px;inset-inline-end:10px;z-index:1;background:rgba(20,23,26,.78);color:#fff;font-size:12.5px;font-weight:700;line-height:1;padding:5px 8px;border-radius:6px}
.pv__player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.pv__cap{display:flex;flex-direction:column;gap:2px;margin:10px 2px 0;line-height:1.8}
.pv__cap b{font-size:15.5px}
.pv__cap span{color:var(--ink2);font-size:14px}
.pv__cap small{font-size:12px}

/* ---- installation guide */
.ig{max-width:860px}
.sec__t small{font-size:13px;font-weight:600;color:var(--muted);margin-inline-start:6px}
.ig__meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.ig__meta>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--card);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:8px 14px}
.ig__meta dt{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.ig__meta dd{margin:0;font-size:14px;font-weight:700}
.ig__tools{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.ig__tools li{background:var(--accent-s);color:var(--accent-d);border-radius:999px;padding:0 10px;font-size:13px}
.ig__body{margin-bottom:14px}
.ig__steps{list-style:none;counter-reset:igs;display:grid;gap:12px;margin:0;padding:0}
.ig__step{counter-increment:igs;position:relative;display:grid;gap:12px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;padding-inline-start:60px;scroll-margin-top:150px}
.ig__step::before{content:counter(igs,persian);position:absolute;inset-inline-start:16px;top:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;font-size:15px;line-height:1}
.ig__step h3{font-size:16px;line-height:1.6;margin:3px 0 4px}
.ig__txt{min-width:0;color:var(--ink2);line-height:2}
.ig__txt p{margin:0 0 .6em}.ig__txt p:last-child{margin:0}
.ig__img{width:100%;max-width:320px;border-radius:12px;border:1px solid var(--line2);background:#fff}
@media (min-width:760px){
  .pv__grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
  .ig__step{padding:18px 22px;padding-inline-start:72px}
  .ig__step::before{inset-inline-start:22px;top:18px}
  .ig__step--img{grid-template-columns:minmax(0,1fr) 220px;align-items:start}
}

/* ---- part passport */
.pp{max-width:980px}
.pp__card{padding:0;overflow:hidden;margin-top:10px}
.pp__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--line2);background:linear-gradient(rgba(26,28,31,.035) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(26,28,31,.035) 1px,transparent 1px) 0 0/20px 20px,var(--paper)}
.pp__kicker{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:700;color:var(--accent)}
.pp__title{font-size:clamp(20px,4.6vw,28px);margin:2px 0 6px}
.pp__serial{margin:0;font-size:14px;color:var(--muted)}
.pp__serial bdi{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--ink);margin-inline-start:4px}
.pp__grade{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:74px;margin:0;border-radius:16px;line-height:1.15;background:var(--accent-s);color:var(--accent-d)}
.pp__grade b{font-size:32px;font-weight:900}
.pp__grade span{font-size:12px;font-weight:700}
.pp__grade--a{background:#e6f4ea;color:#1e7a3a}.pp__grade--b{background:#fff4d6;color:#8a5a00}.pp__grade--c{background:#fde8e8;color:#9b2c2c}
.pp__body{display:grid;gap:20px;padding:20px}
.pp__main{min-width:0}
.pp__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.pp__facts>div{background:var(--paper);border-radius:12px;padding:10px 12px}
.pp__facts dt{font-size:12.5px;color:var(--muted)}
.pp__facts dd{margin:0;font-weight:700;line-height:1.7}
.pp__h{font-size:16px;margin:22px 0 8px}
.pp__text{color:var(--ink2)}
.pp__text p{margin:0 0 .6em}.pp__text p:last-child{margin:0}
.pp__m th{width:50%}
.pp__m td{direction:ltr;text-align:right}
.pp__side{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pp__qr{width:180px;height:180px;padding:8px;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.pp__side p{margin:0;font-size:13px;line-height:1.9}
.pp__label{min-height:40px;font-size:14px}
.pp__photos{padding:0 20px 20px}
.pp__photos .pp__h{margin-top:0}
.pp__photos ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin:0;padding:0}
.pp__photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line2);background:#fff}
.pp__more{margin:16px 2px 32px}
@media (max-width:759px){
  .pp__side{flex-direction:row;align-items:center;text-align:start;border-top:1px solid var(--line2);padding-top:18px;flex-wrap:wrap}
  .pp__qr{width:116px;height:116px;padding:6px}
  .pp__side p{flex:1;min-width:160px}
}
@media (min-width:760px){
  .pp__head{padding:26px 28px}
  .pp__body{grid-template-columns:minmax(0,1fr) 220px;gap:32px;padding:26px 28px}
  .pp__side{border-inline-start:1px solid var(--line2);padding-inline-start:28px}
  .pp__photos{padding:0 28px 28px}
  .pp__photos ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (prefers-reduced-motion:reduce){.pv__play img,.pv__btn{transition:none}}