/* MW Category Carousel (lightweight, no external libs) */
.mwcc{
  --mwcc-accent:#2596be;
  --mwcc-bg:#ffffff;
  --mwcc-text:#1b1f23;
  --mwcc-shadow:0 10px 28px rgba(0,0,0,.06);

  /* hover highlight defaults (blue) */
  --mwcc-hl-border: rgba(37,150,190,.45);
  --mwcc-hl-shadow: 0 18px 44px rgba(37,150,190,.16);

  /* configurable spacing */
  margin-top: var(--mwcc-mt, 18px);
  margin-bottom: var(--mwcc-mb, 8px);
}

.mwcc__wrap{
  position: relative;
  width: 100%;
}

/* Track takes full width (nav buttons overlay) */
.mwcc__track{
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 12px;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* padding left/right so tiles are not hidden behind nav */
  padding: 6px 52px 10px;
  scroll-padding: 52px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mwcc__track::-webkit-scrollbar{ display:none; }

/* Tiles: vertical rectangles 4:5 (FULL WHITE TILE) */
.mwcc__item{
  scroll-snap-align: start;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  aspect-ratio: 4 / 5;
  width: 124px;
  padding: 12px 12px 10px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  box-shadow: var(--mwcc-shadow);

  text-decoration: none;
  color: var(--mwcc-text);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  will-change: transform;
  text-align: center;
}
.mwcc__item:hover{
  transform: scale(1.06);
  border-color: var(--mwcc-hl-border);
  box-shadow: var(--mwcc-hl-shadow);
}

/* Icon area blends into tile */
.mwcc__icon{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.mwcc__icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  opacity: 1;
}

.mwcc__label{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Nav buttons overlay */
.mwcc__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  border: 1px solid rgba(37,150,190,.18);
  background: rgba(255,255,255,.92);
  color: var(--mwcc-accent);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  user-select:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.mwcc__nav:hover{
  transform: translateY(-50%) translateY(-1px);
  border-color: rgba(37,150,190,.35);
}
.mwcc__nav--prev{ left: 6px; }
.mwcc__nav--next{ right: 6px; }
.mwcc__nav span{ font-size: 26px; line-height: 1; }

@media (max-width: 480px){
  .mwcc__nav{ display:none; }
  .mwcc__track{ padding-left: 10px; padding-right: 10px; scroll-padding: 10px; }
  .mwcc__item{ width: 104px; padding: 10px 10px 8px; border-radius: 14px; }
  .mwcc__icon{ border-radius: 12px; }
  .mwcc__icon img{ border-radius: 10px; }
  .mwcc__label{ font-size: 12px; }
  .mwcc__item:hover{ transform: none; }
}
@media (min-width: 769px){
  .mwcc__item{ width: 136px; }
}
@media (prefers-reduced-motion: reduce){
  .mwcc__item, .mwcc__nav{ transition:none; }
}