@charset "utf-8";
/* ===== product page styles ===== */

@property --con02-active-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffe9a8;
}


/* ==================================================================
   con02 : 펫마트 Pick 추천 슬라이더 (디자인 psd/03_제품 y411~1338)
   흰 섹션 + 라이트블루 패널(#dff1ff) + 3탭(프로그레시브 자동전환) +
   카드 327(프론트 con03 pick 형) 4개씩 Swiper + 하단 진행바/네비
   ================================================================== */
.con02 {
  background: #fff;
}

.con02_iner {
  padding-top: 2.9vw;
  padding-bottom: 7vw;
}

/* ---------- 헤드 ---------- */
.con02_head {
  width: 100%;
}

.con02_eyb {
  color: #8a8a8a;
}

.con02_tt {
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 34);
  line-height: 1.2;
  color: #141414;
}

.con02_desc {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
}

/* ---------- 탭 (프로그레시브 자동전환) ---------- */
.con02_tabs {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 6);
  margin-top: 2.5vw;
}

.con02_tab {
  --con02-tab-color: #ffe9a8;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 59);
  padding: 0 calc(var(--px) * 32);
  border: 1px solid #e6e6e6;
  border-radius: 50vw;
  background: #f8f8f8;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.con02_tab_tx {
  position: relative;
  z-index: 1;
  font-size: calc(var(--px) * 17);
  font-weight: 700;
  color: #5a5f66;
  white-space: nowrap;
}

/* 채움 = 파스텔 배경 + 진한 글자, clip-path 로 좌→우 차오름 (JS 가 transition 부여) */
.con02_tab_fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--con02-tab-color);
  clip-path: inset(0 100% 0 0);
}

.con02_tab[data-tab="our"] {
  --con02-tab-color: #d8f0a8;
}

.con02_tab[data-tab="md"] {
  --con02-tab-color: #bee3f8;
}

/* 파스텔 채움 위 글자 — 흰색은 대비 1.2:1 로 안보임 → 진한 글자 (대비 13.6~15.3:1) */
.con02_tab_tx_w {
  color: #141414;
}

/* 정지/재생 버튼 (탭 자동전환 제어) — con02_tab 크기/보더 맞춤, 탭 우측 */
.con02_playpause {
  position: absolute;
  top: 50%;
  right: calc(var(--px) * -74);
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 59);
  height: calc(var(--px) * 59);
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: #f8f8f8;
  box-sizing: border-box;
  cursor: pointer;
}

/* 재생중 = 일시정지 아이콘(막대 2개) */
.con02_pp_pause {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 16);
}

.con02_pp_pause::before,
.con02_pp_pause::after {
  content: "";
  width: calc(var(--px) * 3);
  height: 100%;
  border-radius: 1px;
  background: #5a5f66;
}

/* 일시정지됨 = 재생 아이콘(삼각형) */
.con02_pp_play {
  display: none;
  width: 0;
  height: 0;
  margin-left: calc(var(--px) * 3);
  border-left: calc(var(--px) * 13) solid #5a5f66;
  border-top: calc(var(--px) * 8) solid transparent;
  border-bottom: calc(var(--px) * 8) solid transparent;
}

.con02_playpause.paused .con02_pp_pause {
  display: none;
}

.con02_playpause.paused .con02_pp_play {
  display: block;
}

/* ---------- 라이트블루 패널 ---------- */
.con02_panel {
  --con02-active-color: #ffe9a8;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 1842);
  margin-top: calc(var(--px) * 20);
  padding-bottom: calc(var(--px) * 54);
  border-radius: calc(var(--px) * 40);
  background: var(--con02-active-color);
  transition: --con02-active-color 0.3s ease;
}

/* 좌/우 어깨 (blue 블록, absol) — 패널 상단 양옆에서 위로 솟음. 가운데 gap(어깨 사이) =
   탭이 앉는 노치로, 섹션 흰배경이 자연 노출. (흰 컷아웃 대신 두 요소 띄우는 방식) */
.con02_panel::before {
  content: "";
  position: absolute;
  top: calc(var(--px) * -71);
  left: 0;
  width: calc(var(--px) * 454);
  height: calc(var(--px) * 111);
  border-top-left-radius: calc(var(--px) * 40);
  border-top-right-radius: calc(var(--px) * 40);
  background: var(--con02-active-color);
}

.con02_panel::after {
  content: "";
  position: absolute;
  top: calc(var(--px) * -71);
  right: 0;
  width: calc(var(--px) * 454);
  height: calc(var(--px) * 111);
  border-top-left-radius: calc(var(--px) * 40);
  border-top-right-radius: calc(var(--px) * 40);
  background: var(--con02-active-color);
}

/* 어깨↔노치 연결 오목(concave) 필러 — 어깨 안쪽 세로면이 노치 바닥으로 부드럽게 이어짐(각진 코너 제거) */
.con02_notch_l {
  position: absolute;
  top: calc(var(--px) * -30);
  left: calc(var(--px) * 454);
  width: calc(var(--px) * 30);
  height: calc(var(--px) * 30);
  background: radial-gradient(circle at top right, transparent calc(var(--px) * 30), var(--con02-active-color) calc(var(--px) * 30));
}

.con02_notch_r {
  position: absolute;
  top: calc(var(--px) * -30);
  right: calc(var(--px) * 454);
  width: calc(var(--px) * 30);
  height: calc(var(--px) * 30);
  background: radial-gradient(circle at top left, transparent calc(var(--px) * 30), var(--con02-active-color) calc(var(--px) * 30));
}

.con02_panes {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 1544);
}

/* 탭 전환 = 크로스페이드. 활성 pane 만 relative(높이 확보), 나머지 absolute 스택 후 opacity 0 */
.con02_pane {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.con02_pane.on {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.con02_swiper {
  padding-top: calc(var(--px) * 69);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1544);
  overflow: hidden;
}

/* 카드 (프론트 con03 pick 형 — 뱃지 + 이미지 + 품목명, 가격 없음) */
.con02_sitem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: #141414;
  text-decoration: none;
  cursor: pointer;
}

.con02_card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 327);
  height: calc(var(--px) * 327);
  border: 1px solid #eaeaea;
  border-radius: calc(var(--px) * 30);
  background: #fff;
  box-shadow: 0 calc(var(--px) * 6) calc(var(--px) * 18) rgba(75, 105, 145, 0.10);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.con02_sitem:hover .con02_card {
  box-shadow: 0 calc(var(--px) * 14) calc(var(--px) * 30) rgba(75, 105, 145, 0.22);
  transform: translateY(calc(var(--px) * -6));
}

.con02_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 22);
  top: calc(var(--px) * 12);
  width: calc(var(--px) * 74);
  aspect-ratio: 1 / 1;
}

.con02_badge_tx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 15);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}

/* 대분류 라벨(.pet_catlabel)은 custom.css 공통 — 327px 카드라 기본값 그대로 사용 */

/* 제품 이미지 슬롯 — 고정 높이(85%) + object-fit:contain 으로 이미지 전체 표시(잘림 없음). 카드 중앙정렬로 위아래 여백 */
.con02_pimg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 239);
  height: 85%;
  aspect-ratio: auto; /* percent.js 가 자연비율 aspect-ratio 주입하지 않도록(hasStaticProp) — height 기준 유지 */
  overflow: hidden;
}

.con02_pimg > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.con02_noimg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 169);
  height: calc(var(--px) * 231);
  margin-top: 0;
}

.con02_noimg p {
  font-size: calc(var(--px) * 15);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #9fb3c6;
}

.con02_name {
  width: calc(var(--px) * 327);
  margin-top: calc(var(--px) * 28);
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  text-align: center;
  color: #141414;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

/* ---------- 하단 : 진행바(위치기반) + 네비 ---------- */
.con02_nav {
  justify-content: space-between;
  width: calc(var(--px) * 1544);
  margin-top: 3vw;
}

.con02_prog {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1349);
}

.con02_navbtns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 40);
  --sbtn-bg: #141414;
  --sbtn-chev: #fff;
  --sbtn-ring: #141414;
  transition: filter 0.3s ease;
}

/* 패널 3색 모두 파스텔(밝음) → 텍스트·네비·진행바는 기본 다크값 그대로가 대비 최적 */


/* ==================================================================
   con03 : 제품 필터 그리드 (게시판 petmart_product 연동)
   디자인(psd/03_제품) 1:1 — 풀폭 #f2f2f2 필터밴드 + 다크 대분류 pill(선택시
   네이비+마스코트 쏙) + 캡슐 소분류 pill + 검색 + 정렬 셀렉트 + 5열 279 카드 그리드
   ================================================================== */
.con03 {
  background: #fff;
}

/* ---------- 필터 밴드 (풀폭 #f2f2f2) ---------- */
.con03_filter {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  background: #f2f2f2;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.con03_frow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.con03_frow_cat {
  height: calc(var(--px) * 146);
  border-bottom: 1px solid #dfdfdf;
  overflow: visible;
}

.con03_frow_sub {
  height: calc(var(--px) * 93);
}

/* 세로중앙 = 부모(.con03_frow) align-items:center 로 자동 (top:50%+translateY(-50%) 불필요) */
.con03_flabel {
  position: absolute;
  left: calc(var(--px) * 215);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #222;
}

.con03_fbtns {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 대분류 = 다크 pill (선택 시 네이비 + 마스코트 아래로 쏙) */
.con03_fbtns_cat {
  gap: calc(var(--px) * 8);
}

.con03_catbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 154);
  height: calc(var(--px) * 101);
  border-radius: calc(var(--px) * 20);
  background: #ececec;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s ease;
}

/* 기본: 글자 정중앙(부모 flex center) / 선택: 위로 살짝 밀림 */
.con03_cattx {
  font-size: calc(var(--px) * 21);
  font-weight: 700;
  color: #9aa0a6;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.con03_catbtn.on {
  background: #0b1a2f;
}

.con03_catbtn.on .con03_cattx {
  color: #fff;
  transform: translateY(calc(var(--px) * -22));
}

/* 마스코트 — 기본은 pill 아래로 내려 숨김(overflow hidden 으로 클립),
   선택 시 아래에서 위로 쏙 올라옴. 가로중앙 = 부모(.con03_catbtn) flex center 로 자동
   (position:absolute + left/right 미지정 → static 위치가 align-items:center 로 가운데.
    left:50% + translateX(-50%) 불필요) */
.con03_mas {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: calc(var(--px) * 96);
  aspect-ratio: 93 / 53;
  transform: translateY(100%);
  /* 오버슈트(바운스) 없는 ease-out — 바텀 위로 안 튕겨서 잘린 부분 안 보임 */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* 바텀에 딱 붙음(여백 0). 오버슈트 없어 이 위치 위로 안 올라감 */
.con03_catbtn.on .con03_mas {
  transform: translateY(0);
}

/* 소분류 = 캡슐 pill (기본 회색 흐림 / 선택 흰bg+진한 아이콘·텍스트) */
.con03_fbtns_sub {
  gap: calc(var(--px) * 8);
}

.con03_subbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 8);
  height: calc(var(--px) * 60);
  padding: 0 calc(var(--px) * 24);
  border: 1px solid transparent;
  border-radius: calc(var(--px) * 30);
  background: #ececec;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.con03_subtx {
  font-size: calc(var(--px) * 18);
  font-weight: 600;
  color: #9aa0a6;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.con03_ficon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 30);
  aspect-ratio: 34 / 39;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.con03_subbtn.on {
  background: #fff;
  border-color: #e0e0e0;
}

.con03_subbtn.on .con03_subtx {
  color: #141414;
}

.con03_subbtn.on .con03_ficon {
  opacity: 1;
}

/* ---------- 중앙 컨텐츠 (검색+정렬 / 그리드 / 더보기) ---------- */
.con03_iner {
  padding-top: 2.5vw;
  padding-bottom: 6vw;
}

/* 검색 + 정렬 바 */
/* 검색바 — 박스는 중앙, 안의 placeholder/입력 텍스트만 예외적으로 좌측 정렬 */
.con03_bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1510);
}

/* 공통 .pet_search (custom.css) + con03 폭 override (디자인 500) */
.con03_search {
  width: calc(var(--px) * 580);
}

/* 프로덕트 서치박스는 좌측 정렬 → placeholder/입력값도 왼쪽 (공통은 center) */
.con03_search input {
  text-align: left;
}

/* 정렬 셀렉트박스 (그리드 우측 끝 = quick_fixed 우측 고정메뉴에 안 가림) */
.con03_sort {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 180);
  z-index: 20;
}

.con03_sort_cur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--px) * 54);
  padding: 0 calc(var(--px) * 20);
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 30);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.con03_sort.open .con03_sort_cur {
  border-color: #141414;
}

.con03_sort_label {
  font-size: calc(var(--px) * 16);
  font-weight: 600;
  color: #333;
}

.con03_sort_arw {
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.3s ease;
}

.con03_sort.open .con03_sort_arw {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.con03_sort_list {
  position: absolute;
  top: calc(100% + calc(var(--px) * 6));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  max-height: 0;
  border-radius: calc(var(--px) * 16);
  background: #fff;
  box-shadow: 0 calc(var(--px) * 10) calc(var(--px) * 26) rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.con03_sort.open .con03_sort_list {
  max-height: calc(var(--px) * 260);
  opacity: 1;
  pointer-events: auto;
}

.con03_sort_opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: calc(var(--px) * 13) calc(var(--px) * 20);
  font-size: calc(var(--px) * 15);
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.con03_sort_opt:hover {
  background: #f6f6f6;
}

.con03_sort_opt.on {
  color: #141414;
  font-weight: 700;
  background: #f6f6f6;
}

/* ---------- 그리드 (5열, 카드 279) ---------- */
.con03_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 1510);
  row-gap: 3.6vw;
  margin-top: 5vw;
}

.con03_cell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(100% / 5);
}

.con03_sitem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 279);
  color: #141414;
  text-decoration: none;
}

.con03_card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 279);
  height: calc(var(--px) * 279);
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 26);
  background: #fff;
  box-shadow: 0 calc(var(--px) * 5) calc(var(--px) * 16) rgba(119, 111, 78, 0.10);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.con03_sitem:hover .con03_card {
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 28) rgba(0, 0, 0, 0.15);
  transform: translateY(calc(var(--px) * -6));
}

/* 할인 뱃지 (좌상단 빨강별) */
.con03_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 19);
  top: calc(var(--px) * 11);
  width: calc(var(--px) * 63);
  aspect-ratio: 1 / 1;
}

.con03_badge_tx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 14);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #fff;
}

/* 대분류 라벨(.pet_catlabel)은 custom.css 공통 — 279px 카드라 축소 오버라이드 */
.con03_card .pet_catlabel {
  right: calc(var(--px) * 19);
  top: calc(var(--px) * 18);
  padding: calc(var(--px) * 7) calc(var(--px) * 15);
}

.con03_card .pet_catlabel p {
  font-size: calc(var(--px) * 14);
}

/* 제품 이미지 슬롯 — 고정 높이(85%) + object-fit:contain 으로 이미지 전체 표시(잘림 없음). 카드 중앙정렬로 위아래 여백 */
.con03_pimg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 204);
  height: 85%;
  aspect-ratio: auto; /* percent.js 가 자연비율 aspect-ratio 주입하지 않도록(hasStaticProp) — height 기준 유지 */
  overflow: hidden;
}

.con03_pimg > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.con03_noimg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 144);
  height: calc(var(--px) * 196);
  margin-top: 0;
}

.con03_noimg p {
  font-size: calc(var(--px) * 14);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #c0c0c0;
}

/* 품목명 */
.con03_name {
  width: calc(var(--px) * 279);
  margin-top: calc(var(--px) * 21);
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  text-align: center;
  color: #141414;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 가격 (1줄: 할인율%+정상가취소선 / 2줄: 할인가) */
.con03_price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--px) * 10);
}

.con03_pricetop {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(var(--px) * 6);
}

.con03_rate {
  font-size: calc(var(--px) * 15);
  font-weight: 800;
  color: #ff5a5a;
}

.con03_orig {
  font-size: calc(var(--px) * 14);
  font-weight: 400;
  color: #b0b0b0;
  text-decoration: line-through;
}

.con03_sale {
  margin-top: calc(var(--px) * 3);
  font-size: calc(var(--px) * 19);
  font-weight: 800;
  color: #141414;
}

/* ---------- 빈 결과 ---------- */
.con03_empty {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5vw 0;
}

.con03_empty.show {
  display: flex;
}

.con03_empty p {
  font-size: calc(var(--px) * 18);
  color: #999;
}

/* ---------- 더보기 버튼 ---------- */
.con03_morewrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 3.2vw;
}

.con03_more {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 12);
  height: calc(var(--px) * 60);
  padding: 0 calc(var(--px) * 44);
  border: 1px solid #141414;
  border-radius: calc(var(--px) * 999);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.35s ease;
}

.con03_more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd11e;
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.con03_more:hover {
  border-color: #ffd11e;
}

.con03_more:hover::before {
  transform: translateY(0);
}

.con03_more_tx {
  position: relative;
  z-index: 1;
  font-size: calc(var(--px) * 17);
  font-weight: 700;
  color: #141414;
}

.con03_more_ico {
  position: relative;
  z-index: 1;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  border-right: 2px solid #141414;
  border-bottom: 2px solid #141414;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.35s ease;
}

.con03_more:hover .con03_more_ico {
  transform: rotate(45deg) translate(1px, 1px);
}

.con03_more.is-hidden {
  display: none;
}


/* ============================================================================
   📱 MOBILE ( max-width:599px ) — PRODUCT (제품)
   ============================================================================ */
@media (max-width: 599px) {

  /* ==========================================================================
     con02 : 펫마트 Pick 추천 슬라이더
     PC 전체가 --px(=clientW/1905) 비례라 모바일서 microscopic → vw 재정의.
     탭 3개 한 줄 유지(정지/재생을 줄 안으로) · 카드 4→2열(product.js breakpoints) ·
     PC 어깨/노치 데코는 탭이 위로 빠져 불필요 → 숨김
     ========================================================================== */

  /* 섹션 리듬 */
  .con02_iner {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  /* ---------- 헤드 ---------- */
  .con02_eyb {
    font-size: 3.5vw;
    /* 공통 .eyb(=--px*17) 대신 con02 스코프로만 확대 (타 페이지 무손상) */
  }

  .con02_tt {
    margin-top: 6vw;
    font-size: 7.3vw;
  }

  .con02_desc {
    margin-top: 3vw;
    font-size: 3.6vw;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
  }

  /* ---------- 탭 (3개 한 줄 + 정지/재생) ---------- */
  .con02_tabs {
    margin-top: 6vw;
    gap: 1.5vw;
  }

  .con02_tab {
    height: 10vw;
    padding: 0 5vw;
  }

  .con02_tab_tx {
    font-size: 3.4vw;
  }

  /* 정지/재생 = 절대배치(right:-74px) 해제 → 탭 flex 줄 끝으로 흘려보냄 */
  .con02_playpause {
    position: static;
    transform: none;
    width: 9vw;
    height: 9vw;
  }

  /* 정지/재생 아이콘 (PC --px → vw, 안 하면 microscopic) */
  .con02_pp_pause {
    width: 3vw;
    height: 4vw;
  }

  .con02_pp_pause::before,
  .con02_pp_pause::after {
    width: 1.1vw;
  }

  .con02_pp_play {
    margin-left: 0.8vw;
    border-left-width: 3.5vw;
    border-top-width: 2.2vw;
    border-bottom-width: 2.2vw;
  }

  /* ---------- 라이트블루 패널 ---------- */
  .con02_panel {
    width: 95vw;
    margin-top: 4vw;
    padding-bottom: 8vw;
    border-radius: 8vw;
  }

  /* PC 어깨(솟은 blue블록)/노치 필러 — 탭이 위로 빠져 노치 불필요 → 숨김(단순 라운드 카드) */
  .con02_panel::before,
  .con02_panel::after,
  .con02_notch_l,
  .con02_notch_r {
    display: none;
  }

  .con02_panes {
    width: 100%;
  }

  .con02_swiper {
    width: 100%;
    padding-top: 8vw;
  }

  /* 카드 (slidesPerView 1.7 + centeredSlides = product.js breakpoints. front con03형 큼직) */
  .con02_card {
    width: 56vw;
    height: 56vw;
    border-radius: 4vw;
  }

  .con02_pimg {
    width: 73%;
    margin-top: 0;
  }

  .con02_noimg {
    width: 72%;
    height: 68%;
    margin-top: 0;
    border-radius: 3vw;
  }

  .con02_noimg p {
    font-size: 3.3vw;
    line-height: 1.3;
  }

  .con02_badge {
    width: 15vw;
    left: 2vw;
    top: 2vw;
  }

  .con02_badge_tx {
    font-size: 3.3vw;
    top: 1vw;
  }

  /* 대분류 라벨은 custom.css 공통 모바일값(56vw 카드) 그대로 사용 */

  .con02_name {
    width: 80%;
    margin-top: 4vw;
    font-size: 4vw;
  }

  /* ---------- 하단 진행바 + 네비 (front con03형 세로 스택, 가운데) ---------- */
  .con02_nav {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 86vw;
    margin-top: 7vw;
    gap: 8vw;
  }

  .con02_prog {
    width: 50%;
  }

  .con02_navbtns {
    gap: 8vw;
  }


  /* ==========================================================================
     con03 : 제품 필터 그리드 — PC --px 붕괴(라벨 4px·카드 57px 5열) → vw 재정의
     필터밴드(라벨 위 / pill 아래 세로스택) · 검색+정렬 1행 · 그리드 5열→2열
     ========================================================================== */

  /* ---------- 필터 밴드 : 각 행 라벨 위 + pill 아래로 세로 스택 ---------- */
  .con03_frow_cat,
  .con03_frow_sub {
    flex-direction: column;
    height: auto;
    padding: 5.5vw 0;
    gap: 3vw;
  }

  /* 라벨 = absol(좌측) → in-flow(상단 중앙) */
  .con03_flabel {
    position: relative;
    left: auto;
    font-size: 4vw;
  }

  /* 대분류 : 다크 pill 3개 한 줄 (선택 시 네이비 + 마스코트 쏙 — PC 동일) */
  .con03_fbtns_cat {
    gap: 2.5vw;
  }

  .con03_catbtn {
    width: 27vw;
    height: 18vw;
    border-radius: 4vw;
  }

  /* 미선택 글자만 살짝 진하게(가독 개선) — 마스코트는 PC처럼 선택 시에만 노출 */
  .con03_cattx {
    font-size: 4vw;
    color: #5a616b;
  }

  .con03_catbtn.on .con03_cattx {
    transform: translateY(-4vw);
  }

  .con03_mas {
    width: 17vw;
  }

  /* 소분류 : 캡슐 pill 8개 → flex-wrap 다중행 (전부 노출) */
  .con03_fbtns_sub {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 92vw;
    gap: 2vw;
  }

  /* min-width 로 한 줄 3개 고정 → 8개가 3/3/2 로 균형 배치 (기존 4/3/1 = 기타 외톨이 해소) */
  .con03_subbtn {
    min-width: 27vw;
    height: 9.5vw;
    padding: 0 3.5vw;
    border-radius: 5vw;
    gap: 1.5vw;
  }

  /* 기본(미선택) 대비 강화 — 흐린 #9aa0a6 는 모바일서 안 보임 */
  .con03_subtx {
    font-size: 3.5vw;
    color: #5a616b;
  }

  .con03_ficon {
    width: 5vw;
    opacity: 0.78;
  }

  /* ---------- 검색 + 정렬 : 1행 [검색___] [정렬▾] ---------- */
  .con03_bar {
    width: 92vw;
    justify-content: space-between;
  }

  .con03_search {
    width: 60vw;
  }

  /* 정렬 셀렉트 : absol(우측고정) → in-flow(검색 우측), 높이 검색과 맞춤 */
  .con03_sort {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 30vw;
  }

  .con03_sort_cur {
    height: 14vw;
    padding: 0 4.5vw;
    border-radius: 999px;
    /* 검색 pill(999px)과 형태 통일 — 둘 다 스타디움 */
  }

  .con03_sort_label {
    font-size: 3.4vw;
  }

  .con03_sort_arw {
    width: 2vw;
    height: 2vw;
  }

  .con03_sort_list {
    top: calc(100% + 1.5vw);
    border-radius: 3vw;
  }

  .con03_sort.open .con03_sort_list {
    max-height: 60vw;
  }

  .con03_sort_opt {
    padding: 3vw 4vw;
    font-size: 3.4vw;
  }

  /* ---------- 그리드 : 5열 → 2열 (카드 43vw) ---------- */
  .con03_grid {
    width: 92vw;
    row-gap: 3vw;
    /* 세로갭을 가로갭(3vw=12px)에 통일 — 기준표 #5 */
    margin-top: 6vw;
  }

  .con03_cell {
    width: 50%;
  }

  .con03_sitem {
    width: 43vw;
  }

  .con03_card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 4vw;
  }

  /* 할인 뱃지 (좌상단 빨강별) */
  .con03_badge {
    width: 12.7vw;
    left: 3vw;
    top: 2.5vw;
  }

  .con03_badge_tx {
    font-size: 3vw;
    font-weight: 500;
  }

  /* 대분류 라벨 — 43vw 카드라 공통값에서 축소 */
  .con03_card .pet_catlabel {
    right: 3vw;
    top: 3vw;
    padding: 1.3vw 2.8vw;
  }

  .con03_card .pet_catlabel p {
    font-size: 2.8vw;
  }

  /* 제품 이미지 슬롯 — 카드 채움 (front 구조, margin-top 없음) */
  .con03_pimg {
    width: 73%;
  }

  .con03_noimg {
    width: 22vw;
    height: 30vw;
    margin-top: 0;
  }

  .con03_noimg p {
    font-size: 3.3vw;
  }

  /* 품목명 */
  .con03_name {
    width: 43vw;
    margin-top: 3vw;
    font-size: 3.7vw;
  }

  /* 가격 */
  .con03_price {
    margin-top: 2vw;
  }

  .con03_pricetop {
    gap: 1.5vw;
  }

  .con03_rate {
    font-size: 3.3vw;
  }

  .con03_orig {
    font-size: 3.3vw;
  }

  .con03_sale {
    margin-top: 1vw;
    font-size: 4.2vw;
  }

  /* ---------- 빈 결과 / 더보기 ---------- */
  .con03_empty p {
    font-size: 3.6vw;
  }

  .con03_morewrap {
    margin-top: 8vw;
  }

  .con03_more {
    height: 11vw;
    padding: 0 8vw;
    gap: 2.5vw;
  }

  .con03_more_tx {
    font-size: 3.7vw;
  }

  .con03_more_ico {
    width: 2vw;
    height: 2vw;
  }

  .con03_iner {
    padding-top: 4vw;
    padding-bottom: 15vw;
  }
}