/* Minimal Swiper CSS fallback (ensures layout on frontend) */
.swiper{position:relative; overflow:hidden;}
.swiper-wrapper{display:flex; box-sizing:content-box; transition-property:transform;}
.swiper-slide{flex-shrink:0;}
/* Grid rows need wrapper wrap */
.swiper.swiper-grid .swiper-wrapper{flex-wrap:wrap;}
.swiper.swiper-grid-column .swiper-wrapper{flex-wrap:wrap; flex-direction:column;}

/* Component styles */
.msc { --msc-icon-gap:16px; }
.msc .msc-swiper { width:100%; }
.msc .msc-item{
  display:flex;
  align-items:flex-start;
  gap:var(--msc-icon-gap);
  text-decoration:none;
  background:transparent;
  color:inherit;
}
.msc .msc-item:hover{ text-decoration:none; }

/* Icon (font or SVG) */
.msc .msc-item__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  line-height:1;
}
.msc .msc-item__icon i,
.msc .msc-item__icon svg{ width:1em; height:1em; }
.msc .msc-item__text{ line-height:1.3; }
.msc .msc-item__title{ font-weight:700; }
.msc .msc-item__desc{ opacity:.9; }

/* Mobile: icon on top */
@media (max-width: 767px){
  .msc .msc-item{ flex-direction:column; align-items:flex-start; }
}

/* Custom scrollbar (pagination) */
.msc .msc-scrollbar{
  position:relative;
  width:100%;
  margin-top:20px;
  --msc-scrollbar-height:6px;
  --msc-scrollbar-track:#1d46ff;
  --msc-scrollbar-thumb:#8fe34b;
  --msc-scrollbar-radius:999px;
  height:var(--msc-scrollbar-height);
  background:var(--msc-scrollbar-track);
  border-radius:var(--msc-scrollbar-radius);
}
.msc .msc-scrollbar .swiper-scrollbar-drag{
  background:var(--msc-scrollbar-thumb);
  border-radius:var(--msc-scrollbar-radius);
  position:relative;
  overflow:hidden;
}
.msc .msc-scrollbar .swiper-scrollbar-drag .msc-grabber{
  position:absolute; inset:0; margin:auto;
  width:16px; height:16px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  pointer-events:none;
}