/*
 * bridge.css — Bricks 네이티브 요소 기본값 → 굿웨어몰 킷 CSS 레이아웃 브릿지
 * Bricks container/section 기본 스타일(flex-column, 1100px max-width, padding)을
 * 일반 블록 흐름으로 되돌려 키트 CSS의 클래스 기반 레이아웃이 주도하도록 한다.
 * (gw-swiper 이전, 키트 CSS 체인 최전단에서 로드 — 키트 클래스가 동일 특이성에서 우선)
 */

.brxe-container,
.brxe-section,
.brxe-block,
.brxe-div {
  display: block;
  flex-direction: row;
  align-items: stretch;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 이미지 기본 제약 해제 (키트 CSS가 크기 지정) */
.brxe-image img {
  max-width: 100%;
  height: auto;
}

/* Bricks Image 요소: 링크 래퍼(a)에 클래스가 부여되므로 내부 img에도 키트 스타일 적용 */
.catalog-item.st-tile .tile-thumb .tile-img,
.catalog-item.st-tile .tile-img,
.pc-prod-thumb .pc-prod-img {
  display: block;
  width: 100%;
  height: 100%;
}
.catalog-item.st-tile .tile-thumb .tile-img img,
.catalog-item.st-tile .tile-img img,
.pc-prod-thumb .pc-prod-img img,
.pc-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 타일 썸네일 3:4 비율 유지 (원본 .tile-thumb 가용 높이 보정) */
.catalog-item.st-tile .tile-thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.pc-prod-item .pc-prod-thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}
/* 키트 셀렉터 호환: navigator chips 가로 배치 */
.navigator.st-pill {
  display: flex;
  flex-wrap: wrap;
}

/* 상품명 2줄 클램프 (단일 요소에 label+inner 클래스 병합 케이스) */
.catalog-item.st-tile .tile-goods-label.tile-goods-label-inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
/* Woo 장바구니 담기 버튼 라벨 가시화 */
.single_add_to_cart_button {
  color: #fff !important;
}

/* 헤더 메가메뉴 레이어: 원본은 인라인 position:absolute — 미포함 시 레이아웃 밀림(가로 스크롤) */
.global-header .header-layer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}
.global-header .header-nav {
  position: static;
}
/* Bricks 네비를 원본 GNB 타이포에 맞춤 */
.global-header .header-nav .brxe-text-link {
  font-size: 15px;
  font-weight: 600;
  color: #000;
}
/* 메인 상품 그리드 5열/3열 변형 */
.tiles-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.tiles-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1279px) {
  .tiles-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .tiles-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .tiles-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}

/* 가로 스크롤 근본 차단 (캐러셀/레이어 초기 렌더 오버플로우) */
html, body {
  overflow-x: clip;
}

/* 헤더: 기본 투명 → 호버/메뉴 오픈 시 흰색 (원본 111px 2행 유지) */
#brx-header .global-header {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}
#brx-header:hover .global-header,
#brx-header:focus-within .global-header,
#brx-header:has(.brx-open) .global-header {
  background-color: #fff !important;
  border-bottom-color: #eee !important;
}
/* 메가메뉴 하위 링크 간격 압축 (원본 13px 밀집 리스트) */
.global-header .brx-dropdown-content {
  margin: 0;
  padding: 28px 40px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
}
.global-header .header-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  padding: 28px 40px;
  margin: 0;
}
.global-header .header-panel a.panel-link {
  font-size: 13px;
  line-height: 19px;
  color: #666;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
.global-header .header-panel a.panel-link:hover {
  color: #000;
  text-decoration: underline;
}