/*
 * 상품목록 상단 카테고리 배너 — PC/모바일 이미지 스왑.
 *
 * 퍼블리싱(product.css)은 `.banner01`~`.banner05` 클래스로 모바일에서 `_m` 전용 이미지로 바꾼다.
 * 우리 배너는 API 이미지 한 장(`ON_IMG_PATH`)을 CSS 변수(`--banner-pc`/`--banner-mo`)로 받아,
 * 여기서 브레이크포인트별로 갈아 끼운다. 크기(auto/cover)·위치는 product.css 가 그대로 잡는다.
 *
 * 스코프: `.category-banner` 에만 건다 — 바우처 탭 배너(`.banner.banner04` 등)까지 잡으면
 * 변수가 없어 background-image 가 none 이 돼 이미지가 사라진다.
 */
.pd_wrap .banner.category-banner {
  background-image: var(--banner-pc);
}

/* 모바일 — 퍼블리싱과 같은 768px 이하에서 `_m` 이미지로 바꾼다(product.css 4150행 기준).
   `_m` 을 위층, PC 를 아래층에 깔아 `_m` 이 없으면(404) PC 이미지가 폴백으로 보인다. */
@media (max-width: 768px) {
  .pd_wrap .banner.category-banner {
    background-image: var(--banner-mo), var(--banner-pc);
  }
}

/* 배너 문구 오버레이(대제목·카테고리명)는 화면에서만 감춘다 — 데이터·DOM 은 그대로 유지한다.
   모든 카테고리 탭(육아라이프·여성케어·생활케어) 배너에 동일 적용된다(요청 2026-08-26).
   (바우처 탭 배너는 원래 `.banner_txt` 가 없다.) */
.pd_wrap .banner.category-banner .banner_txt {
  display: none;
}

/*
 * 모바일/태블릿 배너 우측 공백 보정.
 *
 * 증상: 일부 카테고리(예: 여성케어)만 모바일에서 배너 오른쪽에 24px 공백이 생긴다.
 * 원인: `.cont_wrap` 은 `display:flex; gap:24px` 이고, 모바일 필터 팝업 래퍼 `.filter` 가
 *   `.pd_wrap`(배너 포함)의 **flex 형제**로 들어 있다. 필터 팝업 내용이 flex 크기 계산에
 *   참여하는 카테고리에서는 그 옆에 gap 24px 이 예약되어 `.pd_wrap`(=배너)이 24px 줄어든다.
 *   (`.filter_wrap` 사이드바는 이 구간에서 `display:none` 이라 팝업 래퍼만 남는다.)
 * 해결: 팝업 래퍼를 flex 흐름에서 뺀다 — 안의 `.ui-popup` 은 이미 `position:fixed` 라
 *   래퍼가 자리를 차지할 이유가 없다. gap 예약이 사라져 모든 카테고리에서 배너가 꽉 찬다.
 */
@media (max-width: 1024px) {
  .cont_wrap > .filter {
    position: absolute;
  }
}