.antishock-gallery{--card-radius:22px;--card-scale:1;--glow-main:rgba(255, 196, 72, 0.36);--glow-soft:rgba(255, 220, 140, 0.18);--border-gold:rgba(255, 215, 120, 0.72);--glow-size-1:10px;--glow-size-2:24px;--glow-size-3:42px;width:100%;overflow:hidden;padding-top:15px}.gallery-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}.card{transform:scale(var(--card-scale));transform-origin:center top}.card-img{position:relative;border-radius:var(--card-radius);overflow:visible;cursor:pointer;transition:transform .35s ease,filter .35s ease}.card-img::before{content:"";position:absolute;inset:-4px;border-radius:calc(var(--card-radius) + 4px);background:linear-gradient(135deg,rgb(255 255 255 / .2),rgb(255 210 110 / .42),rgb(255 185 60 / .3));opacity:.95;z-index:0;pointer-events:none}.card-img::after{content:"";position:absolute;left:10%;right:10%;top:6px;bottom:-10px;border-radius:calc(var(--card-radius) + 12px);background:radial-gradient(ellipse at 50% 85%,rgb(255 225 150 / .18) 0%,rgb(255 205 90 / .12) 34%,rgb(255 190 70 / .05) 58%,#fff0 76%);filter:blur(14px);opacity:1;z-index:-1;pointer-events:none;transition:opacity .35s ease,transform .35s ease,filter .35s ease}.card-img img{position:relative;z-index:1;width:100%;display:block;border-radius:var(--card-radius);border:1px solid var(--border-gold);box-shadow:0 0 var(--glow-size-1) var(--glow-main),0 0 var(--glow-size-2) var(--glow-soft),0 0 var(--glow-size-3) rgb(255 195 70 / .16),0 18px 35px rgb(0 0 0 / .16);transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}.card-content{padding:14px 8px 4px;text-align:center}.card-content h3{font-size:18px;margin:10px 0 6px;line-height:1.2}.card-content p{font-size:14px;line-height:1.5;opacity:.78;margin:0 0 18px;min-height:84px}.diagonal-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:168px;height:40px;padding:0 14px;text-decoration:none;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease}.diagonal-btn::before{content:"";position:absolute;inset:-1.5px;z-index:0;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);background:radial-gradient(ellipse at 50% 60%,rgb(255 220 130 / .028) 0%,rgb(255 205 90 / .018) 40%,#fff0 70%);filter:blur(4px);opacity:.32;transition:all .35s ease}.diagonal-btn::after{content:"";position:absolute;inset:0;z-index:1;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);background:linear-gradient(135deg,rgb(255 238 190 / .68) 0%,rgb(255 214 112 / .8) 22%,rgb(234 166 38 / .82) 50%,rgb(255 214 112 / .8) 78%,rgb(255 240 194 / .68) 100%);box-shadow:0 0 2px rgb(255 205 90 / .08),0 0 4px rgb(255 205 90 / .04);transition:all .35s ease}.diagonal-btn span{position:relative;z-index:4;width:calc(100% - 2px);height:calc(100% - 2px);display:inline-flex;align-items:center;justify-content:center;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);background:linear-gradient(180deg,rgb(56 56 56 / .98) 0%,rgb(18 18 18) 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),inset 0 -4px 10px rgb(0 0 0 / .22);color:#fff;font-size:16px;font-weight:900;letter-spacing:1.15px;text-transform:uppercase;text-shadow:0 1px 0 rgb(255 255 255 / .04);transition:all .35s ease}.diagonal-btn span::before{content:"";position:absolute;inset:1px;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);border:1px solid rgb(255 223 145 / .18);pointer-events:none;transition:all .35s ease}.diagonal-btn span::after{content:"";position:absolute;top:-20%;left:-34%;width:28%;height:170%;background:linear-gradient(120deg,#fff0 0%,rgb(255 244 220 / .05) 30%,rgb(255 230 170 / .22) 50%,rgb(255 255 255 / .06) 70%,#fff0 100%);transform:skewX(-28deg);opacity:0;filter:blur(.6px);pointer-events:none}.diagonal-btn:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.03)}.diagonal-btn:hover::before{inset:-2px;filter:blur(6px);background:radial-gradient(ellipse at 50% 65%,rgb(255 236 172 / .08) 0%,rgb(255 214 98 / .045) 38%,rgb(255 194 68 / .015) 62%,#fff0 80%);opacity:.6}.diagonal-btn:hover::after{background:linear-gradient(135deg,rgb(255 246 215 / .92) 0%,rgb(255 224 140 / .96) 22%,rgb(255 198 78 / .94) 50%,rgb(255 224 140 / .96) 78%,rgb(255 247 218 / .92) 100%);box-shadow:0 0 3px rgb(255 215 110 / .18),0 0 8px rgb(255 205 90 / .08)}.diagonal-btn:hover span{background:linear-gradient(180deg,rgb(68 68 68) 0%,rgb(14 14 14) 100%);color:#ffd86f;text-shadow:0 0 4px rgb(255 216 111 / .16),0 0 8px rgb(255 216 111 / .08)}.diagonal-btn:hover span::before{border-color:rgb(255 228 150 / .4);box-shadow:inset 0 0 8px rgb(255 210 90 / .04)}.diagonal-btn:hover span::after{opacity:1;animation:antishockShine 1.1s linear infinite}.diagonal-btn:active{transform:translateY(0) scale(1)}@keyframes antishockShine{0%{left:-34%;opacity:0}15%{opacity:.35}50%{opacity:.95}100%{left:112%;opacity:0}}.card:hover .card-img{transform:translateY(-4px)}.card:hover .card-img::after{opacity:1;transform:scale(1.03);filter:blur(16px)}.card:hover .card-img img{transform:scale(1.02);filter:brightness(1.02);box-shadow:0 0 10px rgb(255 205 90 / .42),0 0 20px rgb(255 210 100 / .18),0 0 34px rgb(255 190 60 / .08),0 24px 45px rgb(0 0 0 / .22)}.antishock-product-panel{position:fixed;inset:0;z-index:99999;opacity:0;pointer-events:none;transition:opacity .35s ease}.antishock-product-panel.is-open{opacity:1;pointer-events:auto}.antishock-product-overlay{position:absolute;inset:0;background:rgb(8 8 8 / .78);backdrop-filter:blur(6px)}.antishock-product-shell{position:relative;width:100%;height:100vh;background:linear-gradient(180deg,rgb(20 20 20 / .98) 0%,rgb(7 7 7 / .99) 100%);overflow:hidden}.antishock-product-layout{display:grid;grid-template-columns:50% 50%;width:100%;height:100%}.antishock-product-left{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgb(255 210 90 / .06) 0%,#fff0 58%),linear-gradient(180deg,rgb(20 20 20 / .96) 0%,rgb(9 9 9 / .98) 100%);border-right:1px solid rgb(255 210 95 / .10)}.antishock-product-left-glow{position:absolute;inset:8% 6% 6% 6%;background:radial-gradient(ellipse at center,rgb(255 220 130 / .38) 0%,rgb(255 196 72 / .16) 34%,#fff0 72%);filter:blur(42px);pointer-events:none}.antishock-product-left img{position:relative;z-index:2;max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:28px;border:1px solid rgb(255 215 120 / .72);box-shadow:0 0 12px rgb(255 205 90 / .42),0 0 28px rgb(255 205 90 / .20),0 0 52px rgb(255 190 60 / .10),0 30px 80px rgb(0 0 0 / .42)}.antishock-product-right{height:100vh;overflow-y:auto;padding:42px 34px 60px}.antishock-product-right::-webkit-scrollbar{width:10px}.antishock-product-right::-webkit-scrollbar-track{background:rgb(255 255 255 / .03)}.antishock-product-right::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgb(255 224 140 / .62),rgb(215 160 40 / .52));border-radius:999px}.antishock-product-right-inner{max-width:760px;margin:0 auto}.antishock-product-tag{display:inline-block;margin-bottom:16px;padding:8px 14px;font-size:12px;letter-spacing:1.8px;font-weight:800;color:#141414;background:linear-gradient(135deg,#fbe39a 0%,#dca72c 100%);border-radius:999px}.antishock-product-right h2{margin:0 0 16px;font-size:44px;line-height:1.02;color:#fff}.antishock-product-right p{margin:0 0 28px;font-size:17px;line-height:1.75;color:rgb(255 255 255 / .82)}.antishock-meter-list{display:flex;flex-direction:column;gap:18px;padding-bottom:40px}.antishock-meter{position:relative;padding:18px 18px 20px;border-radius:20px;background:linear-gradient(180deg,rgb(36 36 36 / .96) 0%,rgb(16 16 16 / .98) 100%);border:1px solid rgb(255 210 95 / .14);box-shadow:inset 0 1px 0 rgb(255 255 255 / .04),0 0 18px rgb(255 196 72 / .04)}.antishock-meter::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgb(255 240 190 / .10),rgb(255 210 100 / .05),rgb(255 180 60 / .01));z-index:-1}.antishock-meter-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.antishock-meter-label{font-size:15px;font-weight:700;letter-spacing:.4px;color:#fff}.antishock-meter-number{font-size:26px;font-weight:900;color:#ffd86f;text-shadow:0 0 8px rgb(255 216 111 / .08),0 0 18px rgb(255 216 111 / .04)}.antishock-meter-track{position:relative;width:100%;height:14px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,rgb(70 70 70 / .55) 0%,rgb(30 30 30 / .7) 100%);box-shadow:inset 0 2px 4px rgb(0 0 0 / .35),inset 0 1px 0 rgb(255 255 255 / .03)}.antishock-meter-fill{position:relative;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,rgb(255 222 130) 0%,rgb(255 202 80) 45%,rgb(218 154 28) 100%);box-shadow:0 0 8px rgb(255 205 90 / .36),0 0 18px rgb(255 190 60 / .12);transition:width .75s cubic-bezier(.2,.8,.2,1)}.antishock-meter-fill::after{content:"";position:absolute;top:0;left:-18%;width:24%;height:100%;background:linear-gradient(120deg,#fff0,rgb(255 245 220 / .34),#fff0);transform:skewX(-25deg);animation:antishockBarShine 2.2s linear infinite}@keyframes antishockBarShine{0%{left:-18%}100%{left:110%}}.antishock-product-close{position:absolute;top:18px;right:18px;width:48px;height:48px;border:none;border-radius:50%;cursor:pointer;z-index:10;font-size:30px;line-height:1;color:#fff;background:linear-gradient(180deg,rgb(58 58 58 / .96) 0%,rgb(18 18 18 / .98) 100%);border:1px solid rgb(255 215 120 / .25);box-shadow:0 0 10px rgb(255 205 90 / .06);transition:transform .25s ease,color .25s ease,border-color .25s ease}.antishock-product-close:hover{transform:scale(1.06);color:#ffd86f;border-color:rgb(255 215 120 / .48)}body.antishock-product-open{overflow:hidden}@media(max-width:900px){.gallery-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.gallery-track::-webkit-scrollbar{display:none}.card{flex:0 0 80%;scroll-snap-align:center;transform:none}.card-content p{min-height:auto}.diagonal-btn{width:156px;height:38px}.diagonal-btn span{font-size:15px}.antishock-product-layout{grid-template-columns:1fr}.antishock-product-left{position:relative;height:auto;min-height:42vh;padding:24px 18px 14px;border-right:none;border-bottom:1px solid rgb(255 210 95 / .10)}.antishock-product-left-glow{inset:10% 8% 8% 8%;filter:blur(28px)}.antishock-product-left img{max-width:88%;max-height:46vh}.antishock-product-right{height:58vh;padding:24px 18px 34px}.antishock-product-right h2{font-size:30px}.antishock-product-right p{font-size:15px;line-height:1.65}}</style><script>(function(){const panel=document.getElementById("antishockProductPanel");const closeBtn=panel.querySelector(".antishock-product-close");const overlay=panel.querySelector(".antishock-product-overlay");const panelImage=document.getElementById("panelImage");const panelTitle=document.getElementById("panelTitle");const panelDescription=document.getElementById("panelDescription");const panelMeters=document.getElementById("panelMeters");const cards=document.querySelectorAll(".antishock-gallery .card");function buildMeters(card){panelMeters.innerHTML="";for(let i=1;i <=15;i++){const label=card.dataset["spec"+i+"Label"];const value=card.dataset["spec"+i+"Value"];if(!label || !value) continue;const meter=document.createElement("div");meter.className="antishock-meter";meter.innerHTML=` <div class="antishock-meter-head"><span class="antishock-meter-label">${label}</span><span class="antishock-meter-number">${value}%</span></div><div class="antishock-meter-track"><div class="antishock-meter-fill" data-width="${value}"></div></div>`;panelMeters.appendChild(meter)}requestAnimationFrame(()=>{const fills=panelMeters.querySelectorAll(".antishock-meter-fill");fills.forEach((fill,index)=>{const width=fill.dataset.width || 0;setTimeout(()=>{fill.style.width=width+"%"},index * 60)})})}function openPanel(card){panelImage.src=card.dataset.image || "";panelImage.alt=card.dataset.title || "";panelTitle.textContent=card.dataset.title || "";panelDescription.textContent=card.dataset.description || "";buildMeters(card);panel.classList.add("is-open");panel.setAttribute("aria-hidden","false");document.body.classList.add("antishock-product-open");const rightSide=panel.querySelector(".antishock-product-right");rightSide.scrollTop=0}function closePanel(){panel.classList.remove("is-open");panel.setAttribute("aria-hidden","true");document.body.classList.remove("antishock-product-open")}cards.forEach((card)=>{const img=card.querySelector(".card-img");const btn=card.querySelector(".card-btn");if(img){img.addEventListener("click",()=>openPanel(card))}if(btn){btn.addEventListener("click",(e)=>{e.preventDefault();openPanel(card)})}});overlay.addEventListener("click",closePanel);closeBtn.addEventListener("click",closePanel);document.addEventListener("keydown",function(e){if(e.key==="Escape" && panel.classList.contains("is-open")){closePanel()}})})();