/* =====================================================================
   Shared by every product detail page (products/*.php).
   ===================================================================== */

/* product hero: dash + phone */
.dual{position:relative}
.dual .phone-float{position:absolute;z-index:3;right:-10px;bottom:-26px;width:27%;container-type:inline-size}
.phone-float .phone{position:relative;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1/2;border-radius:16cqw;padding:5cqw}
.phone-float .phone-s{border-radius:12cqw;padding:12cqw 8cqw;gap:5cqw}
.phone-float .phone-s .hd b{font-size:11cqw}
.phone-float .phone-s .hd span{width:14cqw;height:14cqw}
.phone-float .phone-s .ln{padding:5cqw;border-radius:6cqw;gap:5cqw}
.phone-float .phone-s .ln::before{width:13cqw;height:13cqw}
.phone-float .phone-s .ln::after{height:5cqw}
.phone-float .phone-s .btn2{height:16cqw;border-radius:6cqw}
.phone-float .phone-s .img{height:40cqw;border-radius:6cqw}
@media (max-width:520px){.dual .phone-float{right:-4px;width:30%}}

/* problem / solution */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ps .mv-card ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ps .mv-card li{position:relative;padding-left:26px;font-size:15px;line-height:1.5}
.ps .mv-card.dark li{color:#E5E2DF}
.ps .mv-card.dark li::before{content:"×";position:absolute;left:0;top:-1px;color:var(--accent);font-weight:700}
.ps .mv-card:not(.dark) li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
@media (max-width:820px){.ps{grid-template-columns:minmax(0,1fr)}}