#main-swiper .itemimg { padding:0; }
#main-swiper .itemimg img { width:100%; height:auto; display:block; }
#main-swiper .swiper-pagination{
    position:absolute; left:0; right:0; bottom:0;
    margin:0; width:100%; height:auto; text-align:center;
}
#main-swiper .swiper-pagination-bullet{
    display:block; float:left; width: 10%;
    height:5px; margin:0; border-radius:0;
    background:#00ff88; opacity:.25;
}
#main-swiper .swiper-pagination-bullet-active{ opacity:.75; }
#main-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin:0; }
.slides { position:relative; }

.tag-swiper{--gap:0px;--bar:#2684ff;position:relative;width:100%;box-sizing:border-box;}
.tag-swiper .swiper-wrapper{display:flex;box-sizing:border-box;margin-top:5px;}
.tag-swiper .swiper-slide{flex:0 0 200px;width:200px;box-sizing:border-box}
.tag-swiper .item{width:200px;box-sizing:border-box;margin:2px}
.tag-swiper .item .itemimage{width:100%;height:auto;display:block}
.tag-swiper .swiper-scrollbar{position:relative;height:4px;width:100%;box-sizing:border-box;background:rgba(0,0,0,.05)}
.tag-swiper .swiper-scrollbar-horizontal{bottom:auto}
.tag-swiper .swiper-scrollbar-drag{background:var(--bar)}
.tag-swiper .tg-nav{position:absolute;top:170px;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;z-index:5;background:rgba(55,0,60,.55);color:#fff}
.tag-swiper .tg-prev{left:10px}.tag-swiper .tg-next{right:10px}
.tag-swiper .tg-nav::before{content:"";width:10px;height:10px;display:block;border:2px solid currentColor;border-top:0;border-left:0;position: relative;}
.tag-swiper .tg-prev::before{transform:rotate(135deg);left:2px;}.tag-swiper .tg-next::before{transform:rotate(-45deg);left:-2px;}
.tag-swiper .tg-nav:hover{background:rgba(55,0,60,.75)}
.tag-swiper .swiper-button-disabled,.tag-swiper .swiper-button-lock{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:991px){.tag-swiper .tg-nav{display:none}}
/* индивидуальные цвета бегунка */
#hit-swiper    {--bar:#37003c}
#new-swiper    {--bar:#fc2985}
#sale-swiper   {--bar:#f32c17}
#offer-swiper  {--bar:#9a09a7}
#bigdeal-swiper{--bar:#e0bb4c}
#category-swiper{--bar:#333333}

#category-swiper{--gap:15px}
#category-swiper.tag-swiper .swiper-scrollbar{margin-bottom:10px}
#category-swiper.tag-swiper .tg-nav{top:67px;}

.cat-slide{
  width:220px;flex:0 0 220px;box-sizing:border-box;
  overflow:visible;transition:transform .15s ease,box-shadow .15s ease
}
.swiper-slide-visible.cat-slide{transform:translateZ(0);box-shadow: 0 2px 3.5px rgba(0,0,0,0.25);}

.cat-card{
  position:relative;display:block;text-decoration:none;color:#333;
  background:#f5f5f5;border-radius:2px;overflow:hidden;
  aspect-ratio:11/6;
  transition:transform .15s ease-in-out,box-shadow .15s ease-in-out,color .15s linear,opacity .15s linear;
  will-change:transform
}
@supports not (aspect-ratio:1){
  .cat-card::before{content:"";display:block;padding-top:54.545%} /* 120/220 */
}

.cat-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block
}

.cat-label{
  position:absolute;top:10px;left:10px;max-width:calc(100% - 20px);
  font-size:16px;line-height:1.25;color:#333;
  overflow-wrap:break-word;word-break:break-word
}

.cat-card:focus-visible{outline:2px solid #2684ff;outline-offset:2px}
.cat-card:is(:hover,:focus,:focus-visible,:active){
  transform:translateY(-3px);
  box-shadow: 0 1px 1.75px rgba(0,0,0,0.25);
}

.indexinfo {
    display: block;
    aspect-ratio:16/9;
    border-radius:2px;
    position:relative;
}
.indexinfo img {
    display:block;
    aspect-ratio:16/9;
    width:100%;
    border-radius:2px;
}
.indexinfo .choose-btn{
  position:absolute;left:5.625%;bottom:10%;
  background:#ebebeb;color:#333;text-decoration:none;font-weight:400;
  border-radius:2px;line-height:1;white-space:nowrap;
  padding:clamp(6px,1vw,10px) clamp(12px,1.6vw,16px);
  font-size:clamp(13px,1.4vw,16px);
  box-shadow: 0 2px 3.5px rgba(0,0,0,0.25);
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease
}
.indexinfo:hover .choose-btn,.indexinfo:focus .choose-btn{background:#b7a7ba;color:#000;box-shadow: 0 2px 3.5px rgba(0,0,0,0.25);}
.indexinfo:active .choose-btn{transform:translateY(1px)}
.indexhead-more{
    font-size:40%;
    color:#8c8c8c;
    text-decoration:none;
    white-space:nowrap;
  }
  .indexhead-more:hover,
  .indexhead-more:focus{
    text-decoration:underline;
  }
  .indexhead-more:focus-visible{
    outline:0;
    text-decoration:underline;
  }