/* =====================================================================
   Category Slider – Small Devices Only (≤500w x ≤822h)
   Safe with/without Slick initialization. No JS changes needed.
   ===================================================================== */
@media (max-width: 500px) and (max-height: 822px) {

  /* -------------------- BASE (no Slick) -------------------- */
  .osahan-home-page .cat-slider:not(.slick-initialized) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px;
    margin-left: -8px;
    margin-right: -8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    min-height: 84px;
  }
  .osahan-home-page .cat-slider:not(.slick-initialized)::-webkit-scrollbar { display: none; }
  .osahan-home-page .cat-slider:not(.slick-initialized) {
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge legacy */
  }

  .osahan-home-page .cat-slider:not(.slick-initialized) .cat-item-cus {
    flex: 0 0 auto;
    width: auto;
    min-width: 92px;
    max-width: 180px;
    scroll-snap-align: start;
  }

  /* -------------------- WHEN Slick IS initialized -------------------- */
  .osahan-home-page .cat-slider.slick-initialized {
    padding: 6px 0;
    min-height: 84px;
  }

  /* Viewport: allow native horizontal scroll + hide scrollbar */
  .osahan-home-page .cat-slider.slick-initialized .slick-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;        /* enable horizontal swipes */
    scrollbar-width: none;                  /* Firefox */
    -ms-overflow-style: none;               /* IE/Edge legacy */
  }
  .osahan-home-page .cat-slider.slick-initialized .slick-list::-webkit-scrollbar {
    width: 0; height: 0; display: none;     /* Chrome/Safari */
  }

  /* Inner strip: make it wider than viewport so scrolling actually happens */
  .osahan-home-page .cat-slider.slick-initialized .slick-track {
    display: inline-flex !important;         /* inline so width fits content */
    column-gap: 10px;                        /* gap between pills */
    transform: none !important;              /* neutralize Slick translate */
    width: max-content !important;           /* force overflow width */
    min-height: 84px;
  }

  /* Slides behave like flexible “pills” */
  .osahan-home-page .cat-slider.slick-initialized .slick-slide {
    width: auto !important;
    float: none !important;
    height: auto;
    scroll-snap-align: start;
  }

  /* Hide clones to remove “duplicate” look on tiny screens */
  .osahan-home-page .cat-slider.slick-initialized .slick-cloned {
    display: none !important;
  }

  /* Hide arrows/dots (prevents UI overlap) */
  .osahan-home-page .cat-slider.slick-initialized .slick-arrow,
  .osahan-home-page .cat-slider.slick-initialized .slick-dots {
    display: none !important;
  }

  /* -------------------- Card & content (common) -------------------- */
  .osahan-home-page .cat-slider .cat-card {
    padding: 8px !important;
    border: 1px solid #eee;
    height: auto;
    background: #fff;
    border-radius: 8px;
  }

  /* Icon: consistent square; no distortion */
  .osahan-home-page .cat-slider img,
  .osahan-home-page .cat-slider .cat-item-cus img.img-fluid {
    display: block;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain;
    margin: 0 auto 8px;
  }

  /* Title: NO CROPPING — wrap fully */
  .osahan-home-page .cat-slider .cat-title {
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;     /* allow wrapping */
    overflow: visible;       /* no clipping */
    text-overflow: clip;     /* disable ellipsis */
    word-break: break-word;  /* break long words safely */
    text-align: center;
    margin: 0;
  }

  /* Active item highlight */
  .osahan-home-page .cat-slider .current-active > a {
    background: #fff !important;
    border: 2px solid #ff4d4f !important;
  }

  /* Optional: slightly smaller titles in “Most popular” below */
  .osahan-home-page .most_popular .row > [class*="col-"] .card-title {
    font-size: 14px !important;
  }
}