/* VoltBox series pages */

/* sticky category bar */
.vb-pcat{--box:calc(100vw - 160px);--img-size:80px;--name:12px;--name-color:#595c61;--padding:20px;--padding-y:8px;--item-max-w:180px;--jc:flex-start;color:#000;top:var(--hdr-total,90px);z-index:2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#fffc;width:100%;position:sticky}
@media (min-width:1441px){.vb-pcat{--box:1440px;--jc:center}}
@media (max-width:1024px){.vb-pcat{--box:calc(100vw - 96px);--img-size:60px;--padding:16px;--item-max-w:172px;--hdr-total:80px}}
@media (max-width:767px){.vb-pcat{--box:calc(100vw - 48px);--item-max-w:132px}}
.vb-pcat-scroll{overflow-x:auto;scrollbar-width:none;padding:0 calc(50% - var(--box)/2)}
.vb-pcat-scroll::-webkit-scrollbar{display:none}
.vb-pcat-wrap{display:flex;justify-content:var(--jc);position:relative;width:max-content;min-width:100%}
.vb-pcat-item{text-align:center;width:max-content;padding:0 var(--padding);max-width:var(--item-max-w);display:block;flex:none}
.vb-pcat-item:first-child{padding-left:0;max-width:calc(var(--item-max-w) - var(--padding))}
.vb-pcat-item:last-child{padding-right:0;max-width:calc(var(--item-max-w) - var(--padding))}
.vb-pcat-in{padding:var(--padding-y) 0;display:block;position:relative;overflow:hidden}
.vb-pcat-img{width:var(--img-size);height:var(--img-size);margin:0 auto;transition:all .25s ease-in-out}
.vb-pcat-img img{width:100%;height:100%;object-fit:contain}
.vb-pcat-name{font-family:var(--ff-B);font-size:var(--name);color:var(--name-color);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0;line-height:16px;display:-webkit-box;overflow:hidden}
.vb-pcat-item:hover .vb-pcat-img{transform:scale(1.1)}
.vb-pcat.stuck{--img-size:60px}
.vb-pcat.stuck:before{content:"";background-color:#f5f5f6;width:100%;height:1px;position:absolute;bottom:.5px;left:0}
.vb-pcat-bar{position:absolute;bottom:0;left:0;height:2px;background:#000;opacity:0;transition:all .25s ease-in-out;width:0}
.vb-pcat.stuck .vb-pcat-bar.on{opacity:1}
@media (max-width:1024px){.vb-pcat.stuck{--img-size:0px}}

/* banner on series pages: 640px like the reference */
.vb-banner.vb-banner-small{--img-h:640px}
@media (max-width:1024px){.vb-banner.vb-banner-small{--img-h:600px}}

/* banner text top-left */
.vb-slide-info.top-left{text-align:left;width:40%;margin:0}
.vb-slide-info.top-left .vb-slide-btns{justify-content:flex-start}
@media (max-width:1024px){.vb-slide-info.top-left{width:100%}}

/* "why choose" cards & product swiper */
.vb-ksp{--space:100px;--width:280px;--height:460px;--info-box:calc(100vw - 160px);--title:32px;--gap:10px;--radius:4px;--padding:24px;--name:20px;--text:14px;--text-gap:6px;width:100%;padding-top:var(--space);background:#fff;color:#000;line-height:1.3}
.vb-psw{--gap:12px;--radius:8px}
@media (min-width:1441px){.vb-ksp{--space:200px;--width:351px;--height:600px;--info-box:1440px;--title:48px;--gap:12px;--radius:8px;--padding:40px;--name:24px;--text:16px;--text-gap:8px}.vb-psw{--padding:24px}}
@media (max-width:1024px){.vb-ksp{--space:80px;--info-box:calc(100vw - 96px);--title:24px}.vb-psw{--radius:4px}}
@media (max-width:767px){.vb-ksp{--info-box:calc(100vw - 48px)}}
.vb-ksp-info{width:var(--info-box);margin:0 auto}
.vb-ksp-title{font-family:var(--ff-B);font-size:var(--title);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.vb-hscroll{position:relative}
.vb-hscroll-track{display:flex;gap:var(--gap);overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:40px calc(50% - var(--info-box)/2)}
.vb-hscroll-track::-webkit-scrollbar{display:none}
.vb-ksp-item{width:var(--width);flex:none}
.vb-ksp-in{width:100%;height:var(--height);border-radius:var(--radius);transition:transform .25s ease-in-out;position:relative;overflow:hidden;display:block}
.vb-ksp-in:hover .vb-ksp-img img{transform:scale(1.05)}
.vb-ksp-img{border-radius:var(--radius);width:100%;height:100%;overflow:hidden}
.vb-ksp-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-in-out}
.vb-ksp-c{padding:var(--padding);z-index:10;gap:var(--text-gap);flex-direction:column;width:100%;display:flex;position:absolute;top:0;left:0}
.vb-ksp-name{font-family:var(--ff-B);font-size:var(--name);color:#fff;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;white-space:pre-line}
.vb-psw .vb-ksp-c{top:auto;bottom:0}
.vb-psw .vb-ksp-name{font-size:16px}
.vb-psw-text{font-family:var(--ff-M);font-size:14px;color:#cfd0d2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
@media (min-width:1441px){.vb-psw .vb-ksp-name{font-size:22px}}
@media (max-width:1024px){.vb-psw .vb-ksp-name{font-size:16px}.vb-psw-text{font-size:12px}}
.vb-hs-prev,.vb-hs-next{position:absolute;top:50%;width:40px;height:40px;border-radius:50%;transform:translateY(-50%);z-index:20;opacity:0;transition:opacity .25s ease-in-out;pointer-events:none}
.vb-hs-prev{left:24px}
.vb-hs-next{right:24px}
.vb-hs-prev:before,.vb-hs-next:before{content:"";position:absolute;inset:0;border-radius:50%;background:#000;opacity:.2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.vb-hs-prev:hover:before,.vb-hs-next:hover:before{opacity:.35}
.vb-hs-prev:after,.vb-hs-next:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-bottom:2px solid #fff;border-left:2px solid #fff}
.vb-hs-prev:after{transform:translate(-35%,-50%) rotate(45deg)}
.vb-hs-next:after{transform:translate(-65%,-50%) rotate(-135deg)}
.vb-hscroll:hover .vb-hs-prev.can,.vb-hscroll:hover .vb-hs-next.can{opacity:1;pointer-events:all}
@media (min-width:1441px){.vb-hs-prev,.vb-hs-next{width:48px;height:48px}.vb-hs-prev{left:40px}.vb-hs-next{right:40px}}
@media (max-width:1024px){.vb-hs-prev,.vb-hs-next{display:none}}

/* product floors */
.vb-floor{--space:100px;--height:460px;--info-box:calc(100vw - 160px);--title:32px;--desc:20px;--desc-top:16px;--name-gap:8px;--tabs-top:40px;--tab-padding:10px 20px;--tab-gap:16px;--tab-size:16px;--link:14px;--radius:8px;--gap:12px;--scene-w:572px;--btn-gap:8px;--btn:14px;--btn-padding:8px 18px;--name:16px;--text:14px;--card-width:241px;--card-info-padding:24px 16px;--card-img:241px;width:100%;padding-top:var(--space);background:#fff;color:#000;line-height:1.3;overflow:hidden;scroll-margin-top:calc(var(--hdr-total,90px) + 100px)}
@media (min-width:1441px){.vb-floor{--space:200px;--height:600px;--info-box:1440px;--title:48px;--desc:24px;--tab-padding:12px 24px;--tab-gap:24px;--link:20px;--scene-w:714px;--btn-gap:12px;--name:22px;--text:16px;--card-width:351px;--card-info-padding:24px;--card-img:351px}}
@media (max-width:1024px){.vb-floor{--space:80px;--scene-w:426px;--info-box:calc(100vw - 96px);--title:24px;--desc:16px;--desc-top:12px;--tabs-top:24px;--tab-padding:8px 16px;--tab-gap:12px;--tab-size:14px;--radius:4px;--card-img:220px;--card-info-padding:16px 16px 24px}}
@media (max-width:767px){.vb-floor{--info-box:100vw;--btn-gap:12px;--name:20px;--text:14px;--name-gap:4px;--card-width:280px;--card-info-padding:8px 16px 16px;--height:426px;--card-img:280px;--link:16px}}
.vb-floors-end{height:100px}
@media (min-width:1441px){.vb-floors-end{height:200px}}
@media (max-width:1024px){.vb-floors-end{height:80px}}
.vb-floor-h{width:var(--info-box);justify-content:space-between;align-items:flex-end;gap:24px;margin:0 auto;display:flex}
.vb-floor-info{width:60%}
.vb-floor-title{font-family:var(--ff-B);font-size:var(--title);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.vb-floor-desc{margin-top:var(--desc-top);font-family:var(--ff-M);font-size:var(--desc);color:#83868a;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.vb-floor-tabs{margin-top:var(--tabs-top);gap:8px var(--tab-gap);flex-wrap:wrap;display:flex}
.vb-floor-tab{padding:var(--tab-padding);font-family:var(--ff-B);font-size:var(--tab-size);color:#83868a;background-color:#f5f5f6;cursor:pointer;border:1px solid transparent;border-radius:48px;transition:all .15s ease-in-out}
.vb-floor-tab.on{background-color:#000;color:#fff}
.vb-floor-tab:not(.on):hover{border-color:#000;color:#000}
.vb-floor-panel{display:none}
.vb-floor-panel.on{display:block}
.vb-floor-box{width:100%;padding:0 calc(50% - var(--info-box)/2);position:relative}
.vb-floor-items{margin:var(--tabs-top) auto 0;width:100%;height:var(--height);display:flex;gap:var(--gap)}
.vb-floor-scene{width:var(--scene-w);flex:none;border-radius:var(--radius);height:100%;position:relative;overflow:hidden}
.vb-floor-scene img{width:100%;height:100%;object-fit:cover}
.vb-floor-cards{flex:1;min-width:0;border-radius:var(--radius);height:100%;overflow:hidden;position:relative}
.vb-floor-cards .vb-hscroll-track{padding:0;height:100%;gap:var(--gap)}
.vb-fcard{width:var(--card-width);flex:none;border-radius:var(--radius);background-color:#f5f5f6;position:relative;height:100%;display:block;color:#000}
.vb-fcard-img{width:100%;height:var(--card-img);border-radius:var(--radius) var(--radius) 0 0;position:relative;overflow:hidden;display:block}
.vb-fcard-img img{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .4s ease-in-out}
.vb-fcard-img .p{object-fit:contain;mix-blend-mode:multiply}
.vb-fcard-img .s{object-fit:cover;opacity:0}
.vb-fcard-img.has-hover:hover .p{opacity:0}
.vb-fcard-img.has-hover:hover .s{opacity:1}
.vb-fcard-info{width:100%;padding:var(--card-info-padding);height:calc(100% - var(--card-img));flex-direction:column;display:flex;position:absolute;bottom:0;left:0;overflow:hidden}
.vb-fcard-name{font-family:var(--ff-B);font-size:var(--name);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.vb-fcard-text{margin-top:var(--name-gap);font-family:var(--ff-M);font-size:var(--text);color:#83868a;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;white-space:pre-line}
.vb-fcard-btns{gap:6px var(--btn-gap);flex-wrap:wrap;margin-top:auto;display:flex;justify-content:center;padding-top:12px}
.vb-fcard-btn{width:calc(50% - var(--btn-gap)/2);font-family:var(--ff-B);font-size:var(--btn);line-height:20px;text-align:center;white-space:nowrap;text-overflow:ellipsis;padding:var(--btn-padding);overflow:hidden;border:1px solid #000;border-radius:48px;display:block}
.vb-fcard-btn.fill{background:#000;color:#fff}
.vb-fcard-btn:hover{opacity:.8}
@media (max-width:1024px){.vb-fcard-btn{padding:8px}}
@media (max-width:767px){
  .vb-floor-h .vb-floor-info{width:100%}
  .vb-floor-title,.vb-floor-desc{padding:0 24px}
  .vb-floor-tabs{flex-wrap:nowrap;padding:0 24px;overflow-x:auto;scrollbar-width:none}
  .vb-floor-tabs::-webkit-scrollbar{display:none}
  .vb-floor-tab{flex:none}
  .vb-floor-box{padding:0}
  .vb-floor-items{height:auto;flex-direction:column;gap:12px}
  .vb-floor-scene{width:calc(100vw - 48px);height:276px;margin:0 24px}
  .vb-floor-cards{width:100%;height:auto;border-radius:0}
  .vb-floor-cards .vb-hscroll-track{padding:0 24px;height:auto}
  .vb-fcard{height:auto}
  .vb-fcard-info{position:relative;height:auto}
  .vb-fcard-btns{flex-direction:column;padding-top:24px}
  .vb-fcard-btn{width:100%}
}

/* fade-up on enter (like the reference) */
.vb-anim{opacity:0;transform:translateY(60px);transition:all .8s ease-in-out;will-change:opacity,transform}
.vb-anim.enter{opacity:1;transform:translateY(0)}

/* legibility scrim for white banner text over light photos */
.vb-slide.vb-shade .vb-slide-img{position:relative}
.vb-slide.vb-shade .vb-slide-img:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 35%,rgba(0,0,0,0) 60%);pointer-events:none}
@media (max-width:1024px){.vb-slide.vb-shade .vb-slide-img:after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,0) 65%)}}