body{overflow-x:hidden;overflow-y:auto;}

.shop-page{
  position:relative;z-index:2;
  padding:130px 5% 60px;
  min-height:100vh;
}

.shop-page__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--border);
  padding-bottom:32px;
  margin-bottom:36px;
}
.shop-page__title h1{
  font-family:'Anton',sans-serif;
  font-size:clamp(48px,9vw,120px);
  line-height:0.9;
  color:var(--white);
}
.shop-page__title h1 span{color:var(--red);}
.shop-page__title p{
  margin-top:16px;
  max-width:480px;
  font-size:14px;color:var(--grey);line-height:1.6;
}
.shop-page__count{
  font-family:'Anton',sans-serif;
  font-size:13px;letter-spacing:0.15em;color:var(--grey);
  white-space:nowrap;
}

.shop-filters{
  display:flex;gap:32px;
  margin-bottom:40px;
}
.shop-filters button{
  background:none;border:none;cursor:pointer;
  font-family:'Anton',sans-serif;
  font-size:14px;letter-spacing:0.08em;color:var(--grey);
  padding-bottom:6px;position:relative;
  transition:color .3s;
}
.shop-filters button::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);
  transition:width .3s ease;
}
.shop-filters button.active,.shop-filters button:hover{color:var(--white);}
.shop-filters button.active::after{width:100%;}

.shop-filters button.shop-filters__hot{color:var(--red);}
.shop-filters__hot::after{background:var(--white);}
.shop-filters button.shop-filters__hot.active,
.shop-filters button.shop-filters__hot:hover{color:var(--red);}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  background:transparent;
}
.shop-card{
  background:transparent;
  padding:22px;
  display:flex;flex-direction:column;
  position:relative;
  transition:opacity .4s ease, transform .4s ease;
}
.shop-card.filtered-out{
  display:none;
}
.shop-card__tag{
  position:absolute;top:16px;left:16px;z-index:2;
  background:rgba(237,237,237,0.08);
  border:1px solid var(--border);
  color:var(--white);
  font-family:'Anton',sans-serif;
  font-size:10px;letter-spacing:0.08em;
  padding:5px 10px;
}
.shop-card__tag--hot{background:var(--red);border-color:var(--red);}

.shop-card__img{
  aspect-ratio:3/4;width:100%;
  min-height:0;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  position:relative;
}
.shop-card__img::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:98%;aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(0.72);
  background:radial-gradient(circle, rgba(200,30,44,0.7) 0%, rgba(200,30,44,0.3) 40%, rgba(200,30,44,0) 66%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,.9,.2,1);
  pointer-events:none;
  z-index:0;
}
.shop-card:hover .shop-card__img::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.shop-card[data-category="bags"] .shop-card__img::before{
  top:60%;
}
.shop-card[data-category="bags"] .shop-card__img img{
  transform:translateY(-12%);
}
.shop-card__img img{
  position:relative;z-index:1;
  max-width:82%;max-height:82%;
  object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,0.55));
  transition:transform .5s cubic-bezier(.16,.9,.2,1);
}
.shop-card:hover .shop-card__img img{transform:scale(1.07) rotate(-1.5deg);}
.shop-card[data-category="bags"]:hover .shop-card__img img{transform:translateY(-12%) scale(1.07) rotate(-1.5deg);}

.shop-card h3{
  font-family:'Anton',sans-serif;
  font-size:21px;line-height:1.28;letter-spacing:0.01em;
  text-align:center;
  width:100%;
  margin-top:20px;
  height:2.56em;
  overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  align-items:center;
  justify-content:center;
}
.shop-card__row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:14px;gap:10px;
}
.shop-card__price{
  font-family:'Anton',sans-serif;
  font-size:16px;color:var(--red);
  flex-shrink:0;
}
.shop-card__btn{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--border);color:var(--white);
  padding:10px 8px;font-size:10px;font-weight:700;letter-spacing:0.06em;
  cursor:pointer;transition:background .3s,border-color .3s;
  font-family:'Archivo',sans-serif;
  text-decoration:none;text-align:center;
}
.shop-card__btn:hover{background:var(--red);border-color:var(--red);}

@media (max-width:1100px){
  .shop-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .shop-grid{grid-template-columns:1fr;}
  .shop-page{padding:110px 6% 60px;}
  .shop-page__head{flex-direction:column;align-items:flex-start;gap:14px;}
  .shop-filters{gap:20px;flex-wrap:wrap;}
}