.vipcom-cats{
background: var(--base-3, #fff);
border-block-end: 1px solid var(--base, #f0f0f0);
}
.vipcom-cats__inner{
max-width: 1200px;
margin-inline: auto;
padding: 18px 20px 8px;
}
.vipcom-cats__title{
margin: 0 0 14px 0;
font-size: clamp(18px, 2.6vw, 24px);
font-weight: 700;
text-align: center;
color: var(--contrast, #222);
} .vipcom-cats__rail{
display: grid;
grid-template-columns: repeat(10, minmax(120px,1fr));
gap: 22px;
align-items: start;
} .vipcom-cats__item{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--contrast, #222);
text-align: center;
}
.vipcom-cats__item:focus-visible{
outline: 2px solid #1e73be;
outline-offset: 2px;
border-radius: 10px;
}
.vipcom-cats__icon-wrap{
display: grid;
place-items: center;
inline-size: 96px;
block-size: 96px;
}
.vipcom-cats__icon{
inline-size: 96px;
block-size: 96px;
object-fit: contain;
aspect-ratio: 1 / 1; }
.vipcom-cats__emoji{
font-size: 44px;
line-height: 1;
}
.vipcom-cats__label{
font-weight: 600;
font-size: 15px;
line-height: 1.25;
} @media (max-width: 900px){
.vipcom-cats__inner{ padding: 12px 10px 6px; }
.vipcom-cats__rail{
grid-auto-flow: column;
grid-auto-columns: minmax(110px, 1fr);
display: grid;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
gap: 16px;
padding: 4px 6px 10px;
}
.vipcom-cats__item{ scroll-snap-align: start; }
.vipcom-cats__icon-wrap{ inline-size: 86px; block-size: 86px; }
.vipcom-cats__icon{ inline-size: 86px; block-size: 86px; }
.vipcom-cats__label{ font-size: 14px; }
}  .vipcom-cats__icon-wrap{
display:grid;
place-items:center;
inline-size:96px;
block-size:96px;
}
.vipcom-cats__emoji{
font-size:52px; line-height:1;
} @media (max-width: 900px){
.vipcom-cats__icon-wrap{ inline-size:86px; block-size:86px; }
.vipcom-cats__emoji{ font-size:44px; }
}