/* xz-list-v3 | 2026-10-10 | EN /en/products.html list redesign (same card style as stainless-steel-pipes.html):
   1) pagination hidden (pages 2..N merged into page 1 by xz-list-v1.js)
   2) each product card: gradient bg + 16px radius + animated conic border
   3) hover: lift + glow + spinning border */
@property --xz-ha{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes xzSpin{to{--xz-ha:360deg}}
@keyframes xzAlive2{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---- hide pagination on EN products list ---- */
html:has(link[rel=canonical][href*="/en/products.html"]) .pagination.append-page{display:none!important}

/* ---- card base ---- */
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item{
background:linear-gradient(120deg,#fff 0%,#f4f8ff 45%,#fff 90%)!important;
background-size:220% 220%!important;
animation:none!important;
border:2px solid #0000!important;
border-radius:16px!important;
padding:16px 16px 18px!important;
box-shadow:0 4px 16px rgba(15,63,107,.07)!important;
transition:box-shadow .25s ease,transform .25s ease!important;
overflow:visible!important}
/* left accent bar */
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item::before{
content:'';position:absolute;left:0;top:14px;bottom:14px;width:5px;
border-radius:0 4px 4px 0;background:linear-gradient(180deg,#0059B2,#01478D);
z-index:2;pointer-events:none}
/* animated conic border (idle: static, hover: spins) */
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item::after{
content:'';position:absolute;inset:-2px;border-radius:18px;padding:2px;
background:conic-gradient(from var(--xz-ha),#0A5BD6 0,#01478D 222.48deg,#FFD732 222.48deg,#F0AF03 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;animation:none;pointer-events:none;z-index:6;--xz-ha:0deg}

/* ---- hover dynamics ---- */
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item:hover{
box-shadow:0 12px 30px rgba(15,63,107,.16)!important;
transform:translateY(-4px)!important;
animation:xzAlive2 9s linear infinite!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item:hover::after{animation:xzSpin 3.2s linear infinite}

/* ---- image ---- */
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item .product-item-image-box{border-radius:12px!important;overflow:hidden!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item .product-item-image-box img{object-fit:cover!important;width:100%!important;height:100%!important}

/* ---- text: pipes-style (name centered bold; model-no centered gray; desc left gray) ---- */
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item p.product-item-name{
text-align:center!important;font-size:15.5px!important;font-weight:700!important;
color:#0F2C52!important;line-height:1.4!important;min-height:44px!important;
font-family:Inter-Regular,Arial,sans-serif!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item p.product-item-modelno{
text-align:center!important;color:#7d8b9a!important;font-size:12.5px!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item .fz-14{font-size:12.5px!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item p.product-item-desc{
text-align:left!important;color:#5b6b7f!important;font-size:13px!important;line-height:1.55!important;
-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

/* ---- 4 products per row on desktop (was 3: el-col-8 = 33.33%) ---- */
@media(min-width:1025px){
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item-box>.el-col-8,
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item-box>.el-col-6{width:25%!important;flex:0 0 25%!important;max-width:25%!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item p.product-item-name{font-size:14.5px!important;min-height:42px!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item p.product-item-desc{font-size:12.5px!important}
}

/* ---- mobile (2 per row, same as pipes.html) ---- */
@media(max-width:768px){
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item-box>.el-col-8{width:50%!important;flex:0 0 50%!important;max-width:50%!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item{padding:12px 12px 14px!important}
html:has(link[rel=canonical][href*="/en/products.html"]) .product-item p.product-item-name{font-size:14.5px!important;min-height:40px!important}
}