.pd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:var(--s8) 0;align-items:start}
.gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:grid;gap:var(--s6);min-width:0}
.stage{position:relative;background:#ffffff;border:0;border-radius:var(--r-lg);aspect-ratio:1/1;max-width:100%;overflow:hidden;display:grid;place-items:center;cursor:zoom-in}
.stage img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform .25s}
.stage.zoom img{transform:scale(1.8)}
.stage .fb svg,.stage .view svg{width:84%}
.stage .view{width:100%;height:100%;display:grid;place-items:center;background:var(--media)}
.stage .flags{top:14px;left:14px}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:rgba(245,245,247,.9);color:#333;display:grid;place-items:center;cursor:pointer;z-index:2;transition:background var(--t)}
.navbtn:hover{background:#fff;border-color:var(--action);color:var(--action)}
.navbtn.prev{left:12px}.navbtn.next{right:12px}
.counter{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.7);color:#fff;font-size:var(--fs-sm);border-radius:var(--r-pill);padding:2px 10px}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.thumbs button{aspect-ratio:1;max-width:100%;border:2px solid transparent;border-radius:var(--r-card);background:#fff;padding:var(--s2);cursor:pointer;overflow:hidden;display:grid;place-items:center;transition:border-color var(--t)}
.thumbs button:hover{border-color:#d2d2d7}
.thumbs button[aria-selected="true"]{border-color:var(--action)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.thumbs .view,.thumbs .fb{width:100%;height:100%;display:grid;place-items:center;background:var(--media);border-radius:6px}
.thumbs svg{width:86%}
.info{display:grid;gap:var(--s8);min-width:0}
.info .top{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--fg-2)}
.info .top a{color:var(--action);font-weight:600;text-decoration:none}
.info h1{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.12;overflow-wrap:anywhere}
.rate-row{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;font-size:var(--fs-md)}
.rate-row a{color:var(--action)}
.pills{display:flex;gap:var(--s3);flex-wrap:wrap}
.pill{font-size:var(--fs-xs);font-weight:500;background:#fff;border:0;border-radius:var(--r-pill);padding:2px 10px}
.pricebox{background:transparent;padding:0;display:grid;gap:var(--s2)}
.pricebox .now{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.pricebox .was{font-size:var(--fs-md);color:var(--fg-2)}
.pricebox .was b{color:var(--deal);margin-left:var(--s3)}
.pricebox .inst{font-size:var(--fs-md);color:var(--fg-2)}
.pricebox .inst strong{color:var(--fg)}
.opt-group{border:0;padding:0;margin:0;display:grid;gap:var(--s4)}
.opt-group legend{font-weight:600;font-size:var(--fs-lg);margin-bottom:var(--s4)}
.opt-group legend span{font-weight:400;color:var(--fg-2)}
.vers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ver{position:relative}
.ver input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ver label{display:grid;gap:2px;height:100%;border:1px solid #d2d2d7;border-radius:var(--r-card);padding:var(--s5) var(--s6);background:var(--card);cursor:pointer;transition:border-color var(--t)}
.ver label strong{font-size:var(--fs-md);font-weight:600}
.ver label span{font-size:var(--fs-sm);color:var(--fg-2)}
.ver input:hover+label{border-color:#86868b}
.ver input:checked+label{border-color:var(--action);box-shadow:0 0 0 1px var(--action)}
.ver input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.ver input:disabled+label{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.swatches{display:flex;gap:var(--s5);flex-wrap:wrap}
.sw{position:relative}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sw label{display:flex;align-items:center;gap:var(--s4);border:1px solid #d2d2d7;border-radius:var(--r-pill);padding:var(--s2) var(--s6) var(--s2) var(--s2);cursor:pointer;font-size:var(--fs-md);background:var(--card)}
.sw label i{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.sw input:checked+label{border-color:var(--action);box-shadow:0 0 0 1px var(--action)}
.sw input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.gift{border:0;background:#fff;border-radius:var(--r-card);padding:var(--s8) var(--s9)}
.gift h2{font-size:var(--fs-md);font-weight:600;color:var(--fg);display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.gift ol{margin:0;padding-left:20px;display:grid;gap:var(--s3);font-size:var(--fs-md)}
.buy{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:var(--s5);align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid #d2d2d7;border-radius:var(--r-pill);background:var(--card);overflow:hidden}
.qty button{width:40px;height:48px;border:0;background:none;cursor:pointer;font-size:20px;color:var(--fg)}
.qty button:disabled{color:var(--line);cursor:not-allowed}
.qty input{width:44px;text-align:center;border:0;background:none;font-weight:600;font-size:var(--fs-xl);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy .btn{min-height:50px}
.btn-buy{background:var(--action);color:#fff}
.btn-buy:hover{background:var(--action-hover)}
.btn-line{background:transparent;color:var(--action);border-color:var(--action)}
.btn-line:hover{background:var(--action);color:var(--action-fg)}
.buy .wish{position:static;width:50px;height:50px}
.qerr{font-size:var(--fs-sm);color:var(--err);margin-top:-8px}
.qerr:empty{display:none}
.cmpbox{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap}
.btn-cmp{background:#fff;color:var(--fg);border-color:#d2d2d7;min-height:44px}
.btn-cmp:hover{border-color:var(--fg)}
.btn-cmp[aria-pressed="true"]{border-color:var(--ok);color:var(--ok);background:#eaf6ec}
.cmp-view{font-size:var(--fs-sm);color:var(--action);text-decoration:none;font-weight:500}
.cmp-view:hover{text-decoration:underline}
.cmpbox[hidden]{display:none}
.install{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.install button{display:grid;gap:0;text-align:center;border:0;background:#fff;border-radius:var(--r-card);padding:var(--s5);cursor:pointer;transition:border-color var(--t)}
.install button:hover{border-color:var(--action)}
.install strong{font-size:var(--fs-md);color:var(--action)}
.install span{font-size:var(--fs-sm);color:var(--fg-2)}
.stores{background:#fff;border:0;border-radius:var(--r-card);padding:var(--s8) var(--s9)}
.stores h2{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--s4)}
.stores ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);font-size:var(--fs-md)}
.stores li{display:flex;justify-content:space-between;gap:var(--s5)}
.stores .ok{color:var(--ok);font-weight:600;white-space:nowrap}
.stores .low{color:var(--deal);font-weight:600;white-space:nowrap}
.mini-usp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);font-size:var(--fs-sm);color:var(--fg-2)}
.mini-usp div{display:flex;gap:var(--s3);align-items:center}
.mini-usp svg{flex:none;color:var(--action)}
/* tabs */
.tabs-wrap{background:var(--card);border-radius:var(--r-lg);margin-top:var(--s10)}
.tablist,#tablist{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;position:sticky;top:calc(env(safe-area-inset-top,0px) + 52px);background:var(--card);z-index:5;border-radius:var(--r-lg) var(--r-lg) 0 0}
.tablist button,#tablist button{flex:none;background:none;border:0;border-bottom:3px solid transparent;padding:var(--s8) var(--s9);font-weight:600;cursor:pointer;color:var(--fg-2);min-height:52px;font:inherit}
.tablist button:hover,#tablist button:hover{color:var(--fg)}
.tablist button[aria-selected="true"],#tablist button[aria-selected="true"]{color:var(--action);border-bottom-color:var(--action)}
.tabpanel{padding:var(--s9)}
.desc{max-width:78ch}
.desc h2{font-size:var(--fs-2xl);margin-bottom:var(--s5)}
.desc h3{font-size:var(--fs-xl);margin:var(--s9) 0 var(--s4)}
.desc p{font-size:var(--fs-lg);line-height:1.75;margin-bottom:var(--s6)}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);margin:var(--s9) 0}
.feat div{background:#f5f5f7;border-radius:var(--r-card);padding:var(--s8)}
.feat b{display:block;font-size:var(--fs-2xl);font-weight:600;color:var(--fg);line-height:1.1}
.feat span{font-size:var(--fs-sm);color:var(--fg-2)}
.spec-wrap{overflow-x:auto}
table.spec{width:100%;border-collapse:collapse;font-size:var(--fs-md);min-width:480px}
table.spec th[scope="rowgroup"]{text-align:left;background:var(--bg);font-size:var(--fs-lg);padding:var(--s5) var(--s8)}
table.spec th[scope="row"]{text-align:left;font-weight:500;color:var(--fg-2);width:34%;padding:var(--s5) var(--s8);vertical-align:top}
table.spec td{padding:var(--s5) var(--s8)}
table.spec tr+tr th,table.spec tr+tr td{border-top:1px solid var(--line)}
.rv-top{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:var(--s10);align-items:center;padding-bottom:var(--s9);border-bottom:1px solid var(--line)}
.score{text-align:center}
.score b{display:block;font-size:56px;font-weight:600;line-height:1}
.score .stars{font-size:22px}
.score span{font-size:var(--fs-sm);color:var(--fg-2)}
.bars{display:grid;gap:var(--s3)}
.bar{display:grid;grid-template-columns:36px 1fr 40px;gap:var(--s5);align-items:center;font-size:var(--fs-sm)}
.bar i{height:8px;border-radius:var(--r-pill);background:var(--bg);overflow:hidden;display:block}
.bar i b{display:block;height:100%;background:var(--star)}
.bar span:last-child{text-align:right;color:var(--fg-2)}
.reviews{display:grid}
.rv{padding:var(--s9) 0;border-bottom:1px solid var(--line);display:grid;gap:var(--s3)}
.rv header{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.av{width:36px;height:36px;border-radius:50%;background:var(--action);color:var(--action-fg);display:grid;place-items:center;font-weight:600}
.rv .who{font-weight:600}
.rv .when{font-size:var(--fs-sm);color:var(--fg-2)}
.verified{font-size:var(--fs-sm);color:var(--ok);font-weight:500}
.rv p{max-width:78ch}
.rvform{margin-top:var(--s9);display:grid;gap:var(--s6);max-width:620px}
.rvform h3{font-size:var(--fs-xl)}
.starpick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;border:0;padding:0;margin:0}
.starpick legend{width:100%;font-weight:500;margin-bottom:var(--s3)}
.starpick input{position:absolute;opacity:0;width:1px;height:1px}
.starpick label{font-size:30px;color:var(--line);cursor:pointer;line-height:1;padding:2px}
.starpick input:checked~label,.starpick label:hover,.starpick label:hover~label{color:var(--star)}
.starpick input:focus-visible+label{outline:3px solid var(--focus);border-radius:4px}
.rvform textarea{width:100%;min-height:110px;border:1px solid #d2d2d7;border-radius:var(--r-card);padding:var(--s6);background:var(--card);resize:vertical;font:inherit}
.rvform textarea[aria-invalid="true"]{border-color:var(--err)}
.hint{font-size:var(--fs-sm);color:var(--fg-2);display:flex;justify-content:space-between}
.hint .e{color:var(--err)}
.qa{display:grid;gap:var(--s8)}
.qa article{background:#f5f5f7;border:0;border-radius:var(--r-card);padding:var(--s8) var(--s9)}
.qa .q{font-weight:600}
.qa .a{margin-top:var(--s4);padding-left:var(--s8);border-left:3px solid var(--action);color:var(--fg-2)}
.qa .a b{color:var(--fg)}
/* buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--head);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(110%);transition:transform var(--t)}
.buybar.show{transform:none}
.buybar .wrap{display:flex;align-items:center;gap:var(--s8);padding-block:var(--s5)}
.buybar .bi{width:48px;height:48px;border-radius:8px;background:#fff;border:1px solid var(--line);overflow:hidden;flex:none;display:grid;place-items:center}
.buybar .bi img{width:100%;height:100%;object-fit:contain}
.buybar .bi svg{width:44px}
.buybar .bt{min-width:0;flex:1}
.buybar .bt strong{display:block;font-size:var(--fs-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buybar .bt span{font-weight:700;font-size:var(--fs-xl);white-space:nowrap}
.buybar .btn{flex:none}
.buybar .bb-cmp{gap:var(--s3)}
.buybar .bb-cmp[hidden]{display:none}
.related .rail{grid-auto-columns:minmax(240px,1fr)}
.related .compare{display:none}
@media (max-width:980px){.pd{grid-template-columns:1fr}.gallery{position:static}.feat{grid-template-columns:repeat(2,minmax(0,1fr))}.rv-top{grid-template-columns:1fr 1.4fr}.rv-top .btn{grid-column:1/-1;justify-self:start}}
@media (max-width:560px){.vers{grid-template-columns:1fr}.buy{grid-template-columns:auto 1fr auto}.buy .btn-line{grid-column:1/-1;grid-row:2}.install{grid-template-columns:1fr}.mini-usp{grid-template-columns:1fr}.rv-top{grid-template-columns:1fr}.buybar .bt strong{display:none}.buybar .bb-cmp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.buybar .bb-cmp{width:44px;padding:0}.navbtn{width:40px;height:40px}}