.asi{--asi-radius:4px;max-width:100%;margin:48px auto 56px;font-family:inherit;color:#111}.asi *{box-sizing:border-box}.asi__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.asi__eyebrow{font-size:14px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#4a4a4a;margin-bottom:10px}.asi__title{font-size:42px;line-height:1.05;font-weight:800;margin:0;letter-spacing:-.03em}.asi__counter-nav{display:flex;align-items:center;border:1px solid #ececec;border-radius:999px;overflow:hidden;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.03)}.asi__arrow{width:54px;height:46px;border:0;background:#fff;font-size:32px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .2s ease}.asi__arrow:hover{background:#f6f6f6}.asi__counter{min-width:94px;height:46px;border-left:1px solid #eee;border-right:1px solid #eee;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700}.asi__viewport{position:relative;overflow:hidden}.asi__track{position:relative;min-height:600px}.asi__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .45s ease,transform .45s ease,visibility .45s ease}.asi__slide.is-active{position:relative;opacity:1;visibility:visible;transform:none}.asi__hero{position:relative;min-height:600px;border-radius:var(--asi-radius);overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat}.asi__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 38%,rgba(4,10,14,.38) 54%,rgba(4,10,14,.82) 100%)}.asi__slide-title{position:absolute;top:31%;right:8%;width:42%;margin:0;color:#fff;text-align:center;font-size:38px;line-height:1.12;font-weight:800;text-shadow:0 2px 16px rgba(0,0,0,.22)}.asi__products-wrap{position:absolute;right:2.8%;bottom:3.2%;width:49%}.asi__products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.asi__product{display:block;min-width:0;background:#f7f7f7;border-radius:4px;padding:8px;text-decoration:none;color:#111;transition:transform .22s ease,box-shadow .22s ease}.asi__product:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.18)}.asi__product-image{display:block;aspect-ratio:4/5;background:#fff;overflow:hidden}.asi__product-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s ease}.asi__product:hover img{transform:scale(1.035)}.asi__products-arrow{display:none;position:absolute;top:50%;z-index:5;width:38px;height:38px;margin-top:-19px;border:1px solid rgba(0,0,0,.08);border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(0,0,0,.14);font-size:27px;line-height:1;align-items:center;justify-content:center;cursor:pointer}.asi__products-arrow--prev{left:-12px}.asi__products-arrow--next{right:-12px}.asi__products-arrow:disabled{opacity:.3;cursor:default}.asi__dots{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px}.asi__dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#aaa;opacity:.75;cursor:pointer;transition:width .2s ease,background .2s ease}.asi__dot.is-active{width:22px;background:#111;opacity:1}
@media(max-width:1199px){.asi__title{font-size:36px}.asi__hero,.asi__track{min-height:520px}.asi__slide-title{font-size:30px}.asi__products-wrap{width:53%;right:2.2%}.asi__products{grid-template-columns:repeat(4,minmax(0,1fr))}.asi__product:nth-child(n+5){display:none}}
@media(max-width:991px){.asi{margin:36px auto 44px}.asi__head{align-items:center;margin-bottom:20px}.asi__eyebrow{font-size:12px}.asi__title{font-size:30px}.asi__hero,.asi__track{min-height:560px}.asi__shade{background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.15) 45%,rgba(4,10,14,.82) 100%)}.asi__slide-title{top:auto;right:auto;left:5%;bottom:43%;width:90%;text-align:left;font-size:30px}.asi__products-wrap{left:4%;right:4%;bottom:4%;width:92%}.asi__products{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.asi__products::-webkit-scrollbar{display:none}.asi__product{flex:0 0 calc((100% - 30px)/4);scroll-snap-align:start;padding:6px}.asi__product:nth-child(n){display:block}.asi__products-arrow{display:flex}.asi__counter{min-width:72px}.asi__arrow{width:46px}}
@media(max-width:767px){.asi{margin:28px auto 36px}.asi__head{align-items:flex-end;gap:12px}.asi__eyebrow{font-size:10px;margin-bottom:7px}.asi__title{font-size:25px}.asi__counter-nav{transform:scale(.88);transform-origin:right bottom}.asi__hero,.asi__track{min-height:500px}.asi__hero{border-radius:14px;background-position:42% center}.asi__slide-title{bottom:46%;font-size:25px}.asi__products-wrap{left:4%;right:4%;width:92%}.asi__product{flex-basis:calc((100% - 18px)/3)}.asi__products-arrow{width:34px;height:34px;margin-top:-17px;font-size:24px}.asi__products-arrow--prev{left:-8px}.asi__products-arrow--next{right:-8px}}
@media(max-width:480px){.asi__head{display:block;position:relative;padding-right:116px}.asi__counter-nav{position:absolute;right:0;bottom:0}.asi__title{font-size:23px}.asi__hero,.asi__track{min-height:460px}.asi__slide-title{bottom:48%;font-size:22px}.asi__products-wrap{left:3%;right:3%;width:94%}.asi__product{flex-basis:calc((100% - 10px)/2)}.asi__dot{width:6px;height:6px}.asi__dot.is-active{width:18px}}
@media(prefers-reduced-motion:reduce){.asi__slide,.asi__product,.asi__product-image img,.asi__dot{transition:none!important}.asi__products{scroll-behavior:auto}}

/* v5: mobile/tablet heading and arrow alignment fixes */
.asi__arrow,
.asi__products-arrow{
  padding:0;
  line-height:1;
}
.asi__arrow > span,
.asi__products-arrow > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
  transform:translateY(-1px);
}

@media (min-width:768px) and (max-width:991px){
  .asi__slide-title{
    top:auto;
    bottom:54%;
    left:5%;
    right:auto;
    width:90%;
    z-index:4;
    margin:0;
  }
  .asi__products-wrap{
    bottom:4%;
  }
  .asi__arrow > span,
  .asi__products-arrow > span{
    transform:translateY(-2px);
  }
}

@media (max-width:767px){
  .asi__slide-title{
    top:auto;
    bottom:57%;
    left:5%;
    right:auto;
    width:90%;
    z-index:4;
    margin:0;
    line-height:1.08;
  }
  .asi__products-wrap{
    bottom:4%;
  }
  .asi__arrow > span,
  .asi__products-arrow > span{
    transform:translateY(-2px);
  }
}

@media (max-width:480px){
  .asi__slide-title{
    bottom:59%;
  }
}

/* v6: compact top slider navigation */
.asi__counter-nav{
  height:40px;
  border-radius:999px;
  box-shadow:0 3px 12px rgba(0,0,0,.025);
}
.asi__arrow{
  width:44px;
  height:40px;
  min-width:44px;
  font-size:25px;
}
.asi__counter{
  min-width:74px;
  height:40px;
  gap:7px;
  font-size:14px;
}
.asi__arrow > span{
  font-size:25px;
  transform:translateY(-1px);
}

@media (max-width:991px){
  .asi__counter-nav{
    height:36px;
  }
  .asi__arrow{
    width:38px;
    min-width:38px;
    height:36px;
    font-size:22px;
  }
  .asi__counter{
    min-width:62px;
    height:36px;
    gap:5px;
    font-size:12px;
  }
  .asi__arrow > span{
    font-size:22px;
    transform:translateY(-1px);
  }
}

@media (max-width:767px){
  .asi__counter-nav{
    transform:none;
    transform-origin:initial;
    height:34px;
  }
  .asi__arrow{
    width:35px;
    min-width:35px;
    height:34px;
    font-size:20px;
  }
  .asi__counter{
    min-width:56px;
    height:34px;
    gap:4px;
    font-size:11px;
  }
  .asi__arrow > span{
    font-size:20px;
    transform:translateY(-1px);
  }
}

/* v8: progress inside active pagination dot */
.asi__bottom-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
}
.asi__bottom-controls .asi__dots{margin-top:0}
.asi__dot{
  --asi-dot-progress:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#b9b9b9;
  opacity:.78;
}
.asi__dot .asi__dot-fill{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:#111;
  transform:scaleX(var(--asi-dot-progress));
  transform-origin:left center;
  will-change:transform;
  pointer-events:none;
}
.asi__dot.is-active{
  width:28px;
  background:#dedede;
  opacity:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.asi__dot:not(.is-active) .asi__dot-fill{transform:scaleX(0)!important}

/* v8: premium compact top navigation */
.asi__counter-nav{
  gap:4px;
  padding:4px;
  height:auto;
  border:1px solid rgba(17,17,17,.08);
  border-radius:999px;
  overflow:visible;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 28px rgba(17,17,17,.07),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.asi__arrow{
  width:34px;
  min-width: 34px;
  height: 34px;
  border:1px solid rgba(17,17,17,.06);
  border-radius:50%;
  background: linear-gradient(180deg, #fff 0%, #ffffff 100%);
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.asi__arrow:hover{
  color:#fff;
  background:#111;
  box-shadow:0 8px 18px rgba(17,17,17,.18);
}
.asi__arrow:active{transform:scale(.94)}
.asi__arrow > span{
  font-size:23px;
  font-weight:500;
  transform:translateY(-1px);
  transition:transform .22s ease;
  margin-top: -2px;
}
.asi__arrow--prev:hover > span{transform:translate(-2px,-1px)}
.asi__arrow--next:hover > span{transform:translate(2px,-1px)}
.asi__counter{
  min-width:64px;
  height:34px;
  border:0;
  border-radius:999px;
  background: rgb(255 255 255 / 92%);
  gap:6px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
@media(max-width:991px){
  .asi__counter-nav{padding:3px;gap:3px}
  .asi__arrow{width:31px;min-width:31px;height:31px}
  .asi__arrow > span{font-size:21px}
  .asi__counter{min-width:56px;height:31px;font-size:12px;gap:5px}
}
@media(max-width:767px){
  .asi__bottom-controls{margin-top:11px}
  .asi__dot.is-active{width:24px}
  .asi__counter-nav{padding:3px}
  .asi__arrow{width:29px;min-width:29px;height:29px}
  .asi__arrow > span{font-size:19px}
  .asi__counter{min-width:52px;height:29px;font-size:11px;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .asi__dot .asi__dot-fill{display:none}
  .asi__arrow,.asi__arrow > span{transition:none!important}
}