/**
 * Product detail — from mach-product-detail.html
 */
html:has(body.page-product-detail){scroll-behavior:smooth;scroll-padding-top:88px}
body.page-product-detail{
  padding-top:0!important;
  --black:#0b0c0e;--black2:#141518;--white:#fff;--off:#f7f7f8;--tint:#f4f6fa;
  --blue:#1f6feb;--blue-deep:#0d2f66;--blue-light:#5a97ff;--gray:#6b7280;
  --line:rgba(0,0,0,.09);--line-d:rgba(255,255,255,.14);--navy:#0b2a5b;
  --maxw:1400px;--radius:2px;--ease:cubic-bezier(.2,.8,.2,1)
}
body.page-product-detail h1,body.page-product-detail h2,body.page-product-detail h3,body.page-product-detail h4{font-family:'Archivo',sans-serif;letter-spacing:-.01em;margin:0}
body.page-product-detail p{margin:0;line-height:1.65;color:var(--gray)}
body.page-product-detail .wrap:not(.footgrid):not(.footbar){max-width:var(--maxw);margin:0 auto;padding:0 40px;box-sizing:border-box}
@media(max-width:1000px){body.page-product-detail .wrap:not(.footgrid):not(.footbar){padding:0 24px}}
body.page-product-detail .site-footer{border-top:1px solid var(--line-d)}
body.page-product-detail #nav{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#fff!important;box-shadow:none!important}
body.page-product-detail #nav .nav-inner{height:96px!important}
body.page-product-detail #nav .nav-rule{background:rgba(255,255,255,.22)!important}
body.page-product-detail #nav .logo .lg-light{display:block!important}
body.page-product-detail #nav .logo .lg-dark{display:none!important}
body.page-product-detail #nav .navcta{border-color:rgba(255,255,255,.55)!important;color:#fff!important}
body.page-product-detail #nav .searchbtn,body.page-product-detail #nav .iconbtn{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
body.page-product-detail #nav .searchbtn img{filter:none!important}
body.page-product-detail #nav.scrolled,body.page-product-detail #nav.menu-open{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;color:var(--black)!important}
body.page-product-detail #nav.scrolled .nav-inner,body.page-product-detail #nav.menu-open .nav-inner{height:70px!important}
body.page-product-detail #nav.scrolled .nav-rule,body.page-product-detail #nav.menu-open .nav-rule{background:var(--line)!important}
body.page-product-detail #nav.scrolled .logo .lg-light,body.page-product-detail #nav.menu-open .logo .lg-light{display:none!important}
body.page-product-detail #nav.scrolled .logo .lg-dark,body.page-product-detail #nav.menu-open .logo .lg-dark{display:block!important}
body.page-product-detail #nav.scrolled .navcta,body.page-product-detail #nav.menu-open .navcta{border-color:rgba(11,12,14,.24)!important;color:inherit!important}
body.page-product-detail #nav.scrolled .navcta:hover,body.page-product-detail #nav.menu-open .navcta:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
body.page-product-detail #nav.scrolled .searchbtn,body.page-product-detail #nav.menu-open .searchbtn,body.page-product-detail #nav.scrolled .iconbtn,body.page-product-detail #nav.menu-open .iconbtn{background:transparent!important;border-color:rgba(0,0,0,.16)!important;color:var(--black)!important}
body.page-product-detail #nav.scrolled .searchbtn img,body.page-product-detail #nav.menu-open .searchbtn img{filter:brightness(0)!important}
@media(max-width:900px){body.page-product-detail #nav .nav-inner{height:76px!important}}
body.page-product-detail #banner .bg.has-img{background-size:cover;background-position:center 52%}

/* ---- one button family (same as homepage) ---- */
body.page-product-detail .pbtn, body.page-product-detail .storylink, body.page-product-detail .hero-link, body.page-product-detail .btn-ghost{display:inline-flex; align-items:center; gap:12px; height:48px;
  padding:0 26px; margin:0; border:1px solid transparent; border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; line-height:1;
  white-space:nowrap; opacity:1; transform:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease}
body.page-product-detail .pbtn .chev, body.page-product-detail .hero-link .chev, body.page-product-detail .btn-ghost .chev{display:block; width:7px; height:7px; flex:none;
  margin:0 2px 0 0; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pbtn:hover .chev, body.page-product-detail .hero-link:hover .chev, body.page-product-detail .btn-ghost:hover .chev{transform:translateX(4px) rotate(45deg)}
body.page-product-detail .pbtn{background:var(--blue); color:#fff; border-color:var(--blue)}
body.page-product-detail .pbtn:hover{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
body.page-product-detail .hero-link{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55)}
body.page-product-detail .hero-link:hover{background:#fff; border-color:#fff; color:var(--black)}
body.page-product-detail .btn-ghost{background:transparent; color:var(--black); border-color:rgba(11,12,14,.28)}
body.page-product-detail .btn-ghost:hover{background:var(--blue); border-color:var(--blue); color:#fff}

/* ---- section shell ---- */
body.page-product-detail .section{padding:104px 0}
/* related products sits on white 鈥?the light band now belongs to the tabbed content above */
body.page-product-detail .sechead{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px; gap:40px}
body.page-product-detail .sechead .tag{display:block; font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.03em; margin-bottom:16px}
body.page-product-detail .sechead h2{font-family:'Archivo',sans-serif; font-size:clamp(30px,3.4vw,44px); font-weight:800;
  line-height:1.12; letter-spacing:-.02em; max-width:600px}
body.page-product-detail .sechead .desc{max-width:340px; font-size:15px}
@media(max-width:800px){body.page-product-detail .sechead{flex-direction:column; align-items:flex-start}}

/* ---- inner banner: identical treatment to the products listing page ---- */
body.page-product-detail #banner{position:relative; background:var(--black); color:#fff; overflow:hidden; min-height:200px; display:flex; align-items:flex-end}
body.page-product-detail #banner .bg{position:absolute; inset:-4% 0; background:linear-gradient(115deg,#0b1527,#182a42 70%,#13375b); will-change:transform; animation:bgIn 1.6s var(--ease) both}

/* ---- banner entrance (same treatment as mach-support.html) ---- */
@keyframes bgIn{from{opacity:0; transform:scale(1.12)}to{opacity:1; transform:scale(1.04)}}
@keyframes rise{to{opacity:1; transform:none}}
body.page-product-detail .bn-in > *{opacity:0; transform:translateY(22px); animation:rise .9s var(--ease) forwards}
body.page-product-detail .bn-in > *:nth-child(1){animation-delay:.1s}
body.page-product-detail .bn-in > *:nth-child(2){animation-delay:.2s}
body.page-product-detail .bn-in > *:nth-child(3){animation-delay:.3s}
body.page-product-detail .bn-in > *:nth-child(4){animation-delay:.42s}
body.page-product-detail .bn-in > *:nth-child(5){animation-delay:.54s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.page-product-detail, body.page-product-detail, body.page-product-detail{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
  body.page-product-detail .bn-in > *{opacity:1; transform:none}
}
body.page-product-detail #banner::before{content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(5,7,10,.62) 0%, rgba(5,7,10,.2) 34%, rgba(5,7,10,0) 55%),
    linear-gradient(to top, rgba(5,7,10,.9) 0%, rgba(5,7,10,.45) 38%, rgba(5,7,10,.1) 70%),
    linear-gradient(to right, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 55%)}
body.page-product-detail .bn-inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:108px 48px 24px}
body.page-product-detail .hero-mark{display:flex; flex-direction:column; gap:4px; margin-bottom:22px}
body.page-product-detail .hero-mark i{display:block; height:1px; background:rgba(255,255,255,.7); width:26px}
body.page-product-detail .hero-mark i:nth-child(3){width:16px}
body.page-product-detail .bn-eyebrow{font-size:11.5px; letter-spacing:.24em; font-weight:600; color:rgba(255,255,255,.68); margin-bottom:16px}
body.page-product-detail #banner .bn-lede{max-width:960px; margin:6px 0 26px; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.75)}
body.page-product-detail #banner h1{font-weight:800; font-size:40px; line-height:1.06; letter-spacing:-.02em; margin:0 0 18px}
body.page-product-detail .accentsq{display:inline-block; width:.14em; height:.14em; background:var(--blue); margin-left:.12em; vertical-align:.06em}
body.page-product-detail .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.62)}
body.page-product-detail .crumbs a{transition:color .2s}
body.page-product-detail .crumbs a:hover{color:#fff}
body.page-product-detail .crumbs .sep{width:5px; height:5px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); opacity:.6}
body.page-product-detail .crumbs .now{color:#fff; font-weight:600}
@media(max-width:900px){
  body.page-product-detail .bn-inner{padding:88px 20px 16px}
  body.page-product-detail #banner{min-height:120px}
  body.page-product-detail #banner h1{font-size:28px; margin-bottom:10px}
  body.page-product-detail #banner .bn-lede{font-size:14.5px; line-height:1.55; max-width:100%; margin:0 0 16px}
  body.page-product-detail #banner .bg{background-position:center 45%}
}

/* ---- product detail: gallery + info ---- */
body.page-product-detail .pdmain{padding:86px 0 92px}
body.page-product-detail .pdgrid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:64px; align-items:start}
@media(max-width:1000px){body.page-product-detail .pdgrid{grid-template-columns:minmax(0,1fr); gap:44px}}

body.page-product-detail .pdgallery{min-width:0; max-width:100%; width:100%; box-sizing:border-box}

/* product photo on white, framed by a light hairline; prev/next arrows overlay the stage */
body.page-product-detail .pdstage{position:relative; width:100%; max-width:100%; aspect-ratio:1/1; background:#fff; overflow:hidden; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-sizing:border-box}
body.page-product-detail .pdstage img{position:relative; z-index:1; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; box-sizing:border-box;
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .galnav{position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--radius);
  transition:background .25s ease, border-color .25s ease}
body.page-product-detail .galnav span{width:8px; height:8px; border-top:1.6px solid var(--black); border-right:1.6px solid var(--black);
  transform:rotate(-135deg); transition:border-color .25s ease}
body.page-product-detail .galnav.next span{transform:rotate(45deg)}
body.page-product-detail .galnav.prev{left:16px}
body.page-product-detail .galnav.next{right:16px}
body.page-product-detail .galnav:hover{background:var(--blue); border-color:var(--blue)}
body.page-product-detail .galnav:hover span{border-color:#fff}
body.page-product-detail .galnav:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
@media(max-width:600px){
  body.page-product-detail .galnav{width:38px; height:38px; margin-top:-19px}
  body.page-product-detail .galnav.prev{left:10px}
  body.page-product-detail .galnav.next{right:10px}
}
body.page-product-detail .pdstage.swap img{opacity:0; transform:scale(.96)}
/* thumbnails: 5 visible, slide track (no arrows) — padding keeps borders / hover lift unclipped */
body.page-product-detail .pdthumbs{--pd-thumb-gap:14px; --pd-thumb-n:5; --pd-thumb-w:0px; overflow:hidden;
  width:100%; max-width:100%; margin-top:16px; padding:5px 0 6px; box-sizing:border-box}
body.page-product-detail .pdthumbs-track{display:flex; gap:var(--pd-thumb-gap); will-change:transform;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdthumbs-track button{box-sizing:border-box; flex:0 0 var(--pd-thumb-w); width:var(--pd-thumb-w);
  height:auto; aspect-ratio:1/1; padding:0; cursor:pointer; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease}
body.page-product-detail .pdthumbs-track button img{width:100%; height:100%; object-fit:contain; padding:7px; display:block; box-sizing:border-box}
body.page-product-detail .pdthumbs-track button:hover{transform:translateY(-3px)}
body.page-product-detail .pdthumbs-track button.on{border-color:var(--black)}
body.page-product-detail .pdthumbs-track button:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
@media(max-width:600px){body.page-product-detail .pdthumbs{--pd-thumb-gap:9px}}

body.page-product-detail .pdinfo{display:flex; flex-direction:column; align-items:flex-start}
body.page-product-detail .pdinfo .tag{display:block; font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.03em; margin-bottom:16px}
body.page-product-detail .pdinfo h1, body.page-product-detail .pdinfo h2{font-size:clamp(29px,3.1vw,42px); font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px}
body.page-product-detail .pdsub{font-family:'Archivo',sans-serif; font-size:15.5px; font-weight:600; letter-spacing:.01em; color:var(--black); margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid var(--line); max-width:540px}
body.page-product-detail .pdlead{font-size:15px; line-height:1.75; max-width:540px; color:var(--gray)}
body.page-product-detail .pdlead > *:first-child{margin-top:0}
body.page-product-detail .pdlead > *:last-child{margin-bottom:0}
body.page-product-detail .pdlead p{margin:0 0 .85em; color:inherit; line-height:inherit}
body.page-product-detail .pdlead ul,body.page-product-detail .pdlead ol{margin:.4em 0 .85em; padding-left:1.2em}
body.page-product-detail .pdlead a{color:var(--blue)}
body.page-product-detail .pdpoints{list-style:none; margin:28px 0 0; padding:0; width:100%}
body.page-product-detail .pdpoints li{position:relative; padding:0 0 0 22px; margin-bottom:12px; font-size:14px; line-height:1.6; color:var(--black)}
body.page-product-detail .pdpoints li:last-child{margin-bottom:0}
body.page-product-detail .pdpoints li i{position:absolute; left:2px; top:7px; width:6px; height:6px; background:var(--blue); transform:rotate(45deg)}
/* features tab: keep the list measure readable inside the wide panel */
body.page-product-detail .feat-list{max-width:920px; margin-top:0}
body.page-product-detail .pdkeys{display:grid; grid-template-columns:repeat(3,1fr); width:100%; margin-top:30px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
body.page-product-detail .pdkeys div{padding:20px 18px; border-left:1px solid var(--line)}
body.page-product-detail .pdkeys div:first-child{border-left:none; padding-left:0}
body.page-product-detail .pdkeys .k{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-bottom:8px}
body.page-product-detail .pdkeys .v{font-family:'Archivo',sans-serif; font-size:19px; font-weight:700; color:var(--black); line-height:1}
body.page-product-detail .pdkeys .v span{font-size:12.5px; font-weight:500; color:var(--gray); margin-left:3px}
@media(max-width:560px){
  body.page-product-detail .pdkeys{grid-template-columns:1fr}
  body.page-product-detail .pdkeys div{border-left:none; padding:16px 0; border-top:1px solid var(--line)}
  body.page-product-detail .pdkeys div:first-child{border-top:none}
}
body.page-product-detail .pdcta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:32px}
body.page-product-detail .pdnote{margin-top:18px; font-size:12.5px; letter-spacing:.04em; color:var(--gray)}

/* ---- tabs ---- */
body.page-product-detail .pdtabs{padding:40px 0 96px; background:#eff2f8}
body.page-product-detail .pdtabbar{display:flex; gap:46px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
body.page-product-detail .pdtabbar button{position:relative; background:none; border:0; cursor:pointer; font:inherit;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--gray);
  padding:0 0 20px; transition:color .25s ease}
body.page-product-detail .pdtabbar button::after{content:''; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--blue); transition:width .35s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdtabbar button:hover{color:var(--black)}
body.page-product-detail .pdtabbar button.active{color:var(--black)}
body.page-product-detail .pdtabbar button.active::after{width:100%}
body.page-product-detail .pdtabbar button:focus-visible{outline:2px solid var(--blue); outline-offset:6px}
body.page-product-detail .pdpanel{display:none; padding:46px 0 0}
body.page-product-detail .pdpanel.on{display:block}
body.page-product-detail .pdpanel h3{font-size:21px; font-weight:700; line-height:1.25; margin:0 0 14px}
body.page-product-detail .pdpanel p+p{margin-top:14px}
/* body copy inside a wide tab panel */
body.page-product-detail .prose{max-width:880px; font-size:15px; line-height:1.85}
body.page-product-detail .specnote{margin-top:20px; font-size:12.5px; color:var(--gray)}
body.page-product-detail .pdcols{display:grid; grid-template-columns:1fr 1fr; gap:48px}
@media(max-width:800px){body.page-product-detail .pdcols{grid-template-columns:1fr; gap:28px}}

/* accessories rows */
body.page-product-detail .acc{max-width:940px}
body.page-product-detail .acc-row{display:flex; gap:36px; padding:19px 0; border-top:1px solid var(--line); transition:padding-left .25s ease}
body.page-product-detail .acc-row:last-of-type{border-bottom:1px solid var(--line)}
body.page-product-detail .acc-row:hover{padding-left:10px}
body.page-product-detail .acc-row .k{width:190px; flex:none; font-family:'Archivo',sans-serif; font-size:15px; font-weight:700; color:var(--black)}
body.page-product-detail .acc-row .v{font-size:15px; line-height:1.6; color:var(--gray)}
@media(max-width:600px){body.page-product-detail .acc-row{flex-direction:column; gap:8px}body.page-product-detail .acc-row .k{width:auto}}

body.page-product-detail .spectable{width:100%; border-collapse:collapse; max-width:940px}
body.page-product-detail .spectable caption{text-align:left; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--blue); padding:0 0 16px; text-transform:uppercase}
body.page-product-detail .spectable th, body.page-product-detail .spectable td{text-align:left; padding:15px 0; border-bottom:1px solid var(--line);
  font-size:14px; vertical-align:top; font-weight:400}
body.page-product-detail .spectable th{width:290px; color:var(--gray)}
body.page-product-detail .spectable td{color:var(--black)}
@media(max-width:620px){body.page-product-detail .spectable th{width:44%; padding-right:14px}}

body.page-product-detail .dlrow{display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:940px;
  padding:20px 0; border-bottom:1px solid var(--line); transition:padding-left .25s ease}
body.page-product-detail .dlrow:first-of-type{border-top:1px solid var(--line)}
body.page-product-detail .dlrow:hover{padding-left:10px}
body.page-product-detail .dlrow .fn{font-size:14.5px; font-weight:600; color:var(--black)}
body.page-product-detail .dlrow .fm{display:block; font-size:12px; color:var(--gray); margin-top:5px; letter-spacing:.04em}
body.page-product-detail .dlrow .go{display:inline-flex; align-items:center; gap:10px; flex:none; font-size:12px; font-weight:700;
  letter-spacing:.05em; color:var(--blue)}
body.page-product-detail .dlrow .go .chev{display:block; width:6px; height:6px; flex:none; border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s ease}
body.page-product-detail .dlrow:hover .go .chev{transform:translateX(4px) rotate(45deg)}

/* ---- related products: identical card component to the listing page ---- */
body.page-product-detail .pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
@media(max-width:1100px){body.page-product-detail .pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){body.page-product-detail .pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.page-product-detail .pgrid{grid-template-columns:1fr}}
body.page-product-detail .pcard{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  opacity:0; animation:cardIn .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cardIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
body.page-product-detail .pcard:hover{border-color:transparent; box-shadow:0 18px 46px rgba(20,35,65,.13); transform:translateY(-6px)}
/* product photo full-bleed on white */
body.page-product-detail .pimg{position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden; isolation:isolate}
body.page-product-detail .pimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pcard:hover .pimg img{transform:scale(1.07)}
body.page-product-detail .badge{position:absolute; top:14px; left:14px; z-index:2; background:var(--blue); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.14em; padding:5px 9px; border-radius:var(--radius)}
/* copy block: tint + hairline, reads apart from the white photo above */
body.page-product-detail .pmeta{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; background:var(--tint); border-top:1px solid var(--line)}
body.page-product-detail .pmodel{font-family:'Archivo',sans-serif; font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--blue); margin-bottom:7px}
body.page-product-detail .pmeta h4{font-size:17px; font-weight:700; line-height:1.3; text-transform:none; color:var(--black)}
body.page-product-detail .pmeta .ptype{font-size:13px; color:var(--gray); margin-top:6px; line-height:1.5}
body.page-product-detail .pmore{display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--black); transition:color .25s}
body.page-product-detail .pmore .chev{display:block; width:6px; height:6px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pcard:hover .pmore{color:var(--blue)}
body.page-product-detail .pcard:hover .pmore .chev{transform:translateX(5px) rotate(45deg)}

/* ---- CTA band（竖向 padding 放 section，避免被 .wrap{padding:0 40px} 覆盖） ---- */
body.page-product-detail .ctaband{
  position:relative; width:100%; background:var(--black,#0b0c0e); color:#fff;
  overflow:hidden; isolation:isolate; padding:72px 0; box-sizing:border-box
}
body.page-product-detail .ctaband .grid-bg{
  position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;
  background-image:linear-gradient(rgba(31,111,235,.16) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(31,111,235,.16) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.95), transparent 78%);
  mask-image:linear-gradient(to right, rgba(0,0,0,.95), transparent 78%)
}
body.page-product-detail .ctaband .cut{
  position:absolute; top:-20%; right:-6%; z-index:0; width:46%; height:140%; pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(31,111,235,.16) 70%, transparent 100%);
  transform:skewX(-14deg)
}
body.page-product-detail .ctaband .wrap.ctaband-in,
body.page-product-detail .ctaband-in{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:48px; width:100%; box-sizing:border-box
}
body.page-product-detail .ctaband-copy{flex:1 1 auto; min-width:0; max-width:720px}
body.page-product-detail .ctaband .tag{
  display:block; font-size:12.5px; font-weight:700; color:var(--blue-light,#5a97ff);
  letter-spacing:.03em; margin:0 0 16px
}
body.page-product-detail .ctaband h2{
  font-family:'Archivo',sans-serif; font-size:clamp(26px,2.8vw,38px); font-weight:800;
  line-height:1.14; letter-spacing:-.02em; margin:0 0 14px; color:#fff
}
body.page-product-detail .ctaband p{
  font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.6)!important; max-width:520px; margin:0
}
body.page-product-detail .ctaband-act{
  display:flex; align-items:center; gap:14px; flex:0 0 auto; flex-wrap:wrap
}
body.page-product-detail .ctaband .pbtn,
body.page-product-detail .ctaband .hero-link{
  display:inline-flex; align-items:center; gap:12px; height:48px; padding:0 26px; margin:0;
  border:1px solid transparent; border-radius:var(--radius,2px); box-sizing:border-box;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; line-height:1;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease
}
body.page-product-detail .ctaband .pbtn{
  background:var(--blue,#1f6feb); color:#fff; border-color:var(--blue,#1f6feb)
}
body.page-product-detail .ctaband .pbtn:hover{
  background:var(--blue-deep,#0d2f66); border-color:var(--blue-deep,#0d2f66); color:#fff
}
body.page-product-detail .ctaband .hero-link{
  background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55)
}
body.page-product-detail .ctaband .hero-link:hover{
  background:#fff; border-color:#fff; color:var(--black,#0b0c0e)
}
body.page-product-detail .ctaband .pbtn .chev,
body.page-product-detail .ctaband .hero-link .chev{
  display:block; width:7px; height:7px; flex:none; margin:0 2px 0 0;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .3s cubic-bezier(.2,.8,.2,1)
}
body.page-product-detail .ctaband .pbtn:hover .chev,
body.page-product-detail .ctaband .hero-link:hover .chev{
  transform:translateX(4px) rotate(45deg)
}
@media(max-width:1000px){
  body.page-product-detail .ctaband{padding:56px 0}
  body.page-product-detail .ctaband .wrap.ctaband-in,
  body.page-product-detail .ctaband-in{
    flex-direction:column; align-items:flex-start; gap:30px
  }
  body.page-product-detail .ctaband-copy{max-width:none}
}

/* ---- scroll reveal ---- */
body.page-product-detail .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
body.page-product-detail .reveal.in{opacity:1; transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  body.page-product-detail .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* =====================================================================
   ENHANCEMENTS 鈥?product main, info tabs, related products
   (nav, banner, CTA band and footer are intentionally untouched)
   ===================================================================== */

/* ---- shared reveal (JS adds .rv, then removes it once the entrance is done) ---- */
html.js body.page-product-detail .rv{opacity:0; transform:translateY(32px);
  transition:opacity .85s ease var(--d,0s), transform .85s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
html.js body.page-product-detail .rv.in{opacity:1; transform:none}

/* ---- product main: load-in sequence ---- */
@keyframes pdRise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
body.page-product-detail .pdgallery{animation:pdRise .9s cubic-bezier(.2,.8,.2,1) .05s both}
body.page-product-detail .pdinfo > *{animation:pdRise .8s cubic-bezier(.2,.8,.2,1) both}
body.page-product-detail .pdinfo > :nth-child(1){animation-delay:.15s}
body.page-product-detail .pdinfo > :nth-child(2){animation-delay:.22s}
body.page-product-detail .pdinfo > :nth-child(3){animation-delay:.29s}
body.page-product-detail .pdinfo > :nth-child(4){animation-delay:.36s}
body.page-product-detail .pdinfo > :nth-child(5){animation-delay:.43s}
body.page-product-detail .pdinfo > :nth-child(6){animation-delay:.5s}
body.page-product-detail .pdinfo > :nth-child(7){animation-delay:.57s}

body.page-product-detail .pdmain{padding:96px 0 104px}
@media(min-width:1001px){body.page-product-detail .pdgrid{align-items:center; gap:80px}}

/* gallery stage: click opens lightbox; arrows fade in on hover */
body.page-product-detail .pdstage{cursor:zoom-in; touch-action:pan-y}
body.page-product-detail .pdstage img{transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdstage.swap img{opacity:0; transform:scale(.96)}
body.page-product-detail .galnav{opacity:0; transition:opacity .3s ease, background .25s ease, border-color .25s ease, transform .3s ease}
body.page-product-detail .pdstage:hover .galnav, body.page-product-detail .galnav:focus-visible{opacity:1}
body.page-product-detail .galnav:active{transform:scale(.94)}
@media(hover:none){body.page-product-detail .galnav{opacity:1}}
body.page-product-detail .pdcount{position:absolute; left:16px; bottom:16px; z-index:2; padding:6px 11px; font-size:11.5px;
  font-weight:600; letter-spacing:.12em; font-variant-numeric:tabular-nums; color:var(--black);
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--radius);
  transition:opacity .3s ease}

/* product gallery lightbox — one slide per view */
body.pd-lightbox-open{overflow:hidden}
.pd-lightbox{position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  padding:88px 72px 48px; box-sizing:border-box; background:rgba(11,12,14,.88); cursor:zoom-out}
.pd-lightbox[hidden]{display:none!important}
.pd-lightbox__stage{position:relative; margin:0; width:min(1100px,100%); max-height:100%;
  display:flex; flex-direction:column; align-items:stretch; cursor:default}
.pd-lightbox__viewport{width:100%; overflow:hidden; touch-action:pan-y}
.pd-lightbox__track{display:flex; will-change:transform}
.pd-lightbox__slide{flex:0 0 100%; width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  padding:0 4px}
.pd-lightbox__img{display:block; max-width:100%; max-height:calc(100vh - 180px); width:auto; height:auto;
  object-fit:contain; background:#fff; border-radius:var(--radius,2px); user-select:none; -webkit-user-drag:none}
.pd-lightbox__count{margin-top:14px; text-align:center; font-size:12px; font-weight:600; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.78)}
.pd-lightbox__close,.pd-lightbox__nav{position:absolute; z-index:2; display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  border-radius:2px; transition:background .25s ease, border-color .25s ease, transform .2s ease}
.pd-lightbox__close:hover,.pd-lightbox__nav:hover{background:var(--blue,#1f6feb); border-color:var(--blue,#1f6feb)}
.pd-lightbox__close{top:72px; right:24px; width:44px; height:44px; font-size:28px; line-height:1}
body.admin-bar .pd-lightbox__close{top:104px}
.pd-lightbox__nav{top:50%; width:48px; height:48px; margin-top:-24px}
.pd-lightbox__nav span{display:block; width:10px; height:10px; border-top:2px solid currentColor; border-right:2px solid currentColor}
.pd-lightbox__prev{left:18px}
.pd-lightbox__prev span{transform:rotate(-135deg); margin-left:4px}
.pd-lightbox__next{right:18px}
.pd-lightbox__next span{transform:rotate(45deg); margin-right:4px}
.pd-lightbox__nav:active,.pd-lightbox__close:active{transform:scale(.94)}
.pd-lightbox__nav[hidden]{display:none!important}
@media(max-width:782px){body.admin-bar .pd-lightbox__close{top:118px}}
@media(max-width:700px){
  .pd-lightbox{padding:96px 16px 32px}
  .pd-lightbox__nav{width:40px; height:40px; margin-top:-20px}
  .pd-lightbox__prev{left:10px}
  .pd-lightbox__next{right:10px}
  .pd-lightbox__close{top:80px; right:14px; width:40px; height:40px}
  body.admin-bar .pd-lightbox__close{top:128px}
  .pd-lightbox__img{max-height:calc(100vh - 160px)}
}
@media(prefers-reduced-motion:reduce){
  .pd-lightbox__track{transition:none!important}
}

/* thumbnails: dim inactive, blue bar slides in under the active one */
body.page-product-detail .pdthumbs-track button{position:relative; opacity:.55;
  transition:opacity .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdthumbs-track button::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--blue);
  transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdthumbs-track button:hover{opacity:1}
body.page-product-detail .pdthumbs-track button.on{opacity:1; border-color:var(--line)}
body.page-product-detail .pdthumbs-track button.on::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){body.page-product-detail .pdthumbs-track{transition:none}}

/* key figures as three cards */
body.page-product-detail .pdkeys{gap:12px; border:none; margin-top:32px}
body.page-product-detail .pdkeys div, body.page-product-detail .pdkeys div:first-child{padding:20px 20px 22px; border:1px solid var(--line); background:var(--tint);
  position:relative; overflow:hidden; transition:background .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdkeys div::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pdkeys div:hover{background:#fff; border-color:rgba(31,111,235,.35); transform:translateY(-3px)}
body.page-product-detail .pdkeys div:hover::after{transform:scaleX(1)}
body.page-product-detail .pdkeys .v{font-size:24px}
@media(max-width:560px){
  body.page-product-detail .pdkeys div, body.page-product-detail .pdkeys div:first-child{padding:16px 18px; border-top:1px solid var(--line)}
}

/* CTA buttons in the info column only (CTA band keeps its own look) */
body.page-product-detail .pdcta .pbtn, body.page-product-detail .pdcta .btn-ghost{transition:background .25s ease, color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease}
body.page-product-detail .pdcta .pbtn:hover{transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(31,111,235,.65)}
body.page-product-detail .pdcta .btn-ghost:hover{transform:translateY(-2px)}

/* ---- info tabs ---- */
body.page-product-detail .pdtabs{padding:64px 0 108px}
body.page-product-detail .pdtabbar{position:relative; flex-wrap:nowrap; gap:44px; overflow-x:auto; border-bottom:none;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12); scrollbar-width:none; -ms-overflow-style:none}
body.page-product-detail .pdtabbar::-webkit-scrollbar{display:none}
body.page-product-detail .pdtabbar button{white-space:nowrap; flex:none}
html.js body.page-product-detail .pdtabbar button::after{display:none}
body.page-product-detail .tabind{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--blue); pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1)}
@media(max-width:700px){body.page-product-detail .pdtabbar{gap:30px}}

body.page-product-detail .pdpanel{padding:48px 52px 52px; margin-top:32px; background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 60px -44px rgba(13,47,102,.35)}
@keyframes panelIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
body.page-product-detail .pdpanel.on{animation:panelIn .55s cubic-bezier(.2,.8,.2,1)}
@media(max-width:700px){body.page-product-detail .pdpanel{padding:30px 22px 34px}}

/* features: two columns of ruled rows */
body.page-product-detail .feat-list{max-width:none; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; column-gap:64px; row-gap:0; margin-top:6px}
@media(max-width:800px){body.page-product-detail .feat-list{grid-template-columns:1fr}}
body.page-product-detail .feat-list li{margin:0; height:100%; box-sizing:border-box; padding:18px 0 18px 28px; border-bottom:1px solid var(--line); font-size:14.5px;
  transition:padding-left .3s cubic-bezier(.2,.8,.2,1), color .25s ease}
body.page-product-detail .feat-list li i{left:4px; top:25px; transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
body.page-product-detail .feat-list li:hover{padding-left:36px; color:var(--blue-deep)}
body.page-product-detail .feat-list li:hover i{transform:rotate(45deg) scale(1.5)}
body.page-product-detail .feat-list li:last-child{margin-bottom:0}

/* specs / accessories / downloads fill the card */
body.page-product-detail .spectable, body.page-product-detail .acc, body.page-product-detail .dlrow{max-width:none}
body.page-product-detail .spectable caption{padding-bottom:18px}
body.page-product-detail .spectable th, body.page-product-detail .spectable td{padding:15px 14px; transition:background .25s ease}
body.page-product-detail .spectable th{width:34%; font-weight:500}
body.page-product-detail .spectable td{font-weight:500}
body.page-product-detail .spectable tr:hover th, body.page-product-detail .spectable tr:hover td{background:rgba(31,111,235,.045)}
body.page-product-detail .spectable tr:hover th{color:var(--black)}
@media(max-width:620px){body.page-product-detail .spectable th{width:44%}}
body.page-product-detail .acc-row{padding:20px 0}
body.page-product-detail .acc-row:hover{padding-left:12px}
body.page-product-detail .dlrow{padding:22px 14px; margin:0 -14px; transition:background .25s ease, padding-left .3s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .dlrow:hover{background:rgba(31,111,235,.045); padding-left:24px}
body.page-product-detail .dlrow .go{padding:9px 16px; border:1px solid rgba(31,111,235,.35); border-radius:var(--radius);
  transition:background .25s ease, color .25s ease, border-color .25s ease}
body.page-product-detail .dlrow:hover .go{background:var(--blue); border-color:var(--blue); color:#fff}

/* ---- related products: reveal on scroll (the old load-time animation also blocked hover lift) ---- */
body.page-product-detail .pcard{animation:none; opacity:1}
body.page-product-detail .pmeta{transition:background .35s ease}
body.page-product-detail .pcard:hover .pmeta{background:#fff}
body.page-product-detail .pcard::after{content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--blue);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pcard:hover::after{width:100%}
body.page-product-detail .pimg img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
body.page-product-detail .pcard:hover .pimg img{transform:scale(1.08)}

@media(prefers-reduced-motion:reduce){
  html.js body.page-product-detail .rv{opacity:1; transform:none; transition:none}
  body.page-product-detail .pdgallery, body.page-product-detail .pdinfo > *, body.page-product-detail .pdpanel.on{animation:none}
}
/* ---- mobile: swipeable tab bar + fade/chevron hint + safe table ---- */
body.page-product-detail .pdtabscroll{position:relative}
@media(max-width:900px){
  body.page-product-detail .pdtabbar{flex-wrap:nowrap; overflow-x:auto; gap:26px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; scroll-snap-type:x proximity}
  body.page-product-detail .pdtabbar::-webkit-scrollbar{display:none}
  body.page-product-detail .pdtabbar button{flex:none; white-space:nowrap; padding:14px 0; font-size:15px; scroll-snap-align:start}
  body.page-product-detail .pdtabscroll.has-more::after{content:''; position:absolute; top:0; right:0; bottom:1px; width:52px; pointer-events:none;
    background:linear-gradient(to right,rgba(239,242,248,0),#eff2f8 78%)}
  body.page-product-detail .pdtabscroll.has-more::before{content:'\203A'; position:absolute; right:10px; top:50%; transform:translateY(-50%);
    font-size:24px; line-height:1; color:var(--gray); pointer-events:none; z-index:2}
  body.page-product-detail .specscroll{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
}