/* ============================================================
   MOBITY LAB (theme/09) - 보조 CSS
   본문은 Tailwind utility 중심. 여기는 예외 보조만.
   ============================================================ */

/* 가로 스크롤 칩/리스트의 스크롤바 숨김 (원본 .scrollbar-hide 재현) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 전역 가로 overflow 안전장치 (280/320 보호) */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ------------------------------------------------------------
   Tailwind 4 browser CDN grid 함정 회피
   arbitrary grid / 단일 1fr 파싱 폭발 방지: minmax(0,1fr) 명시
   ------------------------------------------------------------ */
#productGrid,
#bestsellers .grid,
#whyus .grid,
#reviews .grid,
#instaGrid {
  display: grid;
}
#productGrid > *,
#bestsellers .grid > *,
#whyus .grid > *,
#reviews .grid > *,
#instaGrid > *,
.swiper-slide {
  min-width: 0;
}

/* 메인 상품 그리드: 2열 → md 4열 (minmax 명시) */
#productGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#bestsellers .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#whyus .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#reviews .grid {
  grid-template-columns: minmax(0, 1fr);
}
#instaGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 768px) {
  #productGrid,
  #bestsellers .grid,
  #whyus .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #reviews .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #instaGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   New Arrivals Swiper - 카드 폭 / 슬라이드 표시 보정
   Swiper가 슬라이드에 display:block 강제 → flex 정렬 보정
   ------------------------------------------------------------ */
.newArrivalsSwiper {
  overflow: hidden;
}
.newArrivalsSwiper .swiper-slide {
  width: 220px;
  height: auto;
  display: flex;
}
.newArrivalsSwiper .swiper-slide > a {
  width: 100%;
}
@media (min-width: 768px) {
  .newArrivalsSwiper .swiper-slide {
    width: 280px;
  }
}

/* 숨겨진 제품 카드(카테고리 필터) */
.product-card.is-hidden {
  display: none;
}

/* 카테고리 칩 활성 상태 (JS 토글) */
.cat-chip.is-active {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

/* AOS 미로딩 시 콘텐츠가 숨겨지지 않도록 안전장치 */
[data-aos]:not(.aos-animate) {
  opacity: 1;
}