/* ===================================================
   피터캣 클럽 — FluxShop 브랜드 오버레이
   FluxShop 기본 스킨(THE PURE)의 CSS 변수를 재정의한다.
   마크업은 FluxShop 기본 스킨 그대로 쓰고, 색상·폰트·둥근모서리만 피터캣 톤으로.
   기준: astra-child/style.css 의 프론트 액센트 #532B83, 상품상세 CTA #E9532A
   =================================================== */

:root {
	--fhs-primary:       #532B83;
	--fhs-primary-hover: #3f2066;
	--fhs-accent:        #E9532A;
	--fhs-accent-dark:   #c8431f;
	--fhs-success:       #1e9e52;
	--fhs-danger:        #e8323c;

	--fhs-font: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;

	--fhs-radius:      12px;
	--fhs-radius-sm:   8px;
	--fhs-radius-lg:   16px;
}

/* 다크모드 대응 — 시스템이 다크를 선호해도 상점은 라이트 고정(브랜드 일관성) */
@media (prefers-color-scheme: dark) {
	:root {
		--fhs-bg: #ffffff;
		--fhs-text: #111111;
	}
}

/* 터치 타겟 44px 보장 (astra-child 디자인 원칙과 동일 기준) */
.fluxshop-btn,
.fs-btn,
button.fluxshop,
.fluxshop input[type="submit"] {
	min-height: 44px;
}

/* 가로 스크롤 방지 (astra-child 디자인 원칙)
   전역 선택자(.fluxshop *)로 걸면 아이콘 SVG 처럼 고유 크기가 없는 요소까지
   0px 로 눌려 사라진다(1.13.2 찜 버튼 아이콘 실종 사례). 넘칠 수 있는
   미디어·표 요소로만 한정한다. */
.fluxshop {
	max-width: 100%;
}

.fluxshop img,
.fluxshop video,
.fluxshop iframe,
.fluxshop table,
.fluxshop pre {
	max-width: 100%;
}

.fluxshop img,
.fluxshop video {
	height: auto;
}

/* ===================================================
   FluxShop 1.13.2 대응 — 신규 흑백(#111) 디자인 레이어 위에
   피터캣 브랜드 컬러를 다시 입힌다.

   1.13.2 는 상품상세(.fhs-pdp)·장바구니(.fhs-cart2)·결제(.fluxshop-checkout)에
   변수를 쓰지 않는 하드코딩 색상과 !important 를 도입했다. 변수 재정의만으로는
   덮이지 않으므로 같은 선택자에 브랜드 값을 명시한다.
   =================================================== */

/* 상품 상세 — 포인트 컬러(품절·할인 등)를 피터캣 CTA 주황으로 */
.fhs-pdp {
	--fhs-pdp-ink:    #532B83;
	--fhs-pdp-accent: #E9532A;
}

/* 주요 CTA(구매하기·결제하기·전체주문)를 브랜드 보라로 */
.fluxshop .fluxshop-btn--primary,
.fhs-pdp .fhs-sidebar__actions .fluxshop-btn--buy,
.fhs-sidebar__actions .fluxshop-btn--primary,
.fluxshop-checkout .fluxshop-btn--primary,
.fhs-cart2 .fhs-cart-order-all {
	background: #532B83 !important;
	border-color: #532B83 !important;
	color: #fff !important;
}

.fluxshop .fluxshop-btn--primary:hover,
.fhs-pdp .fhs-sidebar__actions .fluxshop-btn--buy:hover,
.fhs-sidebar__actions .fluxshop-btn--primary:hover,
.fluxshop-checkout .fluxshop-btn--primary:hover,
.fhs-cart2 .fhs-cart-order-all:hover {
	background: #3f2066 !important;
	border-color: #3f2066 !important;
}

/* 보조 CTA(선택주문·장바구니)는 보라 아웃라인 */
.fhs-cart2 .fhs-cart-order-selected,
.fluxshop .fluxshop-btn--outline:hover {
	border-color: #532B83 !important;
	color: #532B83 !important;
}

/* 찜(발바닥) 활성 상태 — 브랜드 주황 */
.fhs-sidebar__actions .fhs-sidebar__wish.active,
.fhs-sidebar__actions .fhs-sidebar__wish.active svg {
	color: #E9532A;
	fill: #E9532A;
}

/* 키보드 포커스 표시 — 접근성(색상만으로 상태를 알리지 않는다) */
.fluxshop .fluxshop-btn:focus-visible,
.fhs-pdp button:focus-visible,
.fhs-cart2 button:focus-visible {
	outline: 2px solid #E9532A;
	outline-offset: 2px;
}

/* 테마(Astra) 전역 button 패딩이 FluxShop 아이콘 버튼의 콘텐츠 박스를 눌러
   내부 SVG 가 찌그러진다(찜 버튼 아이콘이 8px 로 압축되던 문제). 아이콘 버튼은
   패딩을 걷어내고 아이콘이 줄어들지 않도록 고정한다. */
.fhs-sidebar__actions .fhs-sidebar__wish,
.fluxshop .fhs-wishlist-btn {
	padding: 0;
}

.fhs-sidebar__actions .fhs-sidebar__wish svg,
.fluxshop .fhs-wishlist-btn svg {
	flex: 0 0 auto;
}

/* 결제 화면 보조 버튼(적립금 전액 사용·쿠폰 적용) — 코어 기본 검정을 브랜드 보라로 */
#fhs-use-all-points,
#fhs-apply-coupon {
	background: #532B83;
	border-color: #532B83;
	color: #fff;
}

#fhs-use-all-points:hover,
#fhs-apply-coupon:hover {
	background: #3f2066;
	border-color: #3f2066;
}

/* ===================================================
   모바일 터치 타겟 44x44 보장 (astra-child 디자인 원칙)
   데스크탑 디자인은 그대로 두고 좁은 화면에서만 키운다.
   =================================================== */
@media (max-width: 768px) {
	.fhs-cart-qty,
	.fhs-qty__btn,
	.fhs-cart-row__del,
	.fhs-cart-btn,
	.fhs-sidebar__wish,
	#fhs-use-all-points,
	#fhs-apply-coupon {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ===================================================
   상품 목록 — 모바일 2열 고정
   코어(1.13.2)는 .fhs-shop-grid 를 두 블록에 나눠 정의하는데,
   뒤 블록의 `≤1024px → 3열` 이 앞 블록의 `≤768px → 2열` 을 덮어써서
   601~768px 구간이 3열로 떨어진다. 코어를 고치면 업그레이드 때 날아가므로
   여기서 선택자 특정도를 한 단계 높여 모바일 2열을 확정한다.
   =================================================== */
@media (max-width: 768px) {
	.fluxshop .fhs-shop-grid,
	.fhs-shop--musinsa .fhs-shop-grid,
	.fluxshop .fluxshop-products.fhs-shop-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 10px;
	}
}

/* ===================================================
   상품 목록 필터 — 모바일 접기
   좁은 화면에서 필터바가 6줄로 쌓여 상품이 첫 화면 밖으로 밀리는 문제.
   토글 버튼(assets/shop.js 가 삽입)으로 접었다 편다.
   데스크탑은 기존 그대로(토글 숨김 · 필터 항상 노출).
   =================================================== */
.fsp-filter-toggle {
	display: none;
}

@media (max-width: 768px) {
	.fsp-filter-toggle {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		min-height: 44px;
		margin: 8px 0 4px;
		padding: 0 14px;
		border: 1px solid #e0e0e0;
		border-radius: 6px;
		background: #fff;
		color: #111;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.fsp-filter-toggle.has-filters {
		border-color: #532B83;
		color: #532B83;
	}

	.fsp-filter-toggle__count:not(:empty) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 10px;
		background: #532B83;
		color: #fff;
		font-size: 11px;
		font-weight: 700;
	}

	/* 열림/닫힘 표시를 화살표로도 알린다(색상만으로 상태를 알리지 않기) */
	.fsp-filter-toggle__caret {
		margin-left: auto;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .2s ease;
	}

	.fsp-filters-open .fsp-filter-toggle__caret {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	/* 기본은 접힘 */
	.fhs-shop-top .fhs-filterbar {
		display: none;
	}

	.fhs-shop-top.fsp-filters-open .fhs-filterbar {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 0 14px;
	}

	/* 펼쳤을 때도 줄 수를 줄인다: 검색은 한 줄, 가격·평점·칩은 나눠 담기 */
	.fhs-shop-top .fhs-filterbar__search {
		flex: 1 1 100%;
		height: 44px;
	}

	.fhs-shop-top .fhs-filterbar__search input {
		width: 100%;
	}

	.fhs-shop-top .fhs-filterbar__price {
		flex: 1 1 100%;
	}

	.fhs-shop-top .fhs-filterbar__price input {
		flex: 1 1 0;
		width: auto;
		height: 44px;
	}

	.fhs-shop-top .fhs-filterbar__rating {
		flex: 1 1 auto;
		height: 44px;
	}

	.fhs-shop-top .fhs-filterbar__reset {
		flex: 0 0 auto;
		margin-left: 0;
		height: 44px;
	}

	.fhs-shop-top .fhs-toggle-chip {
		flex: 0 0 auto;
	}

	/* 코어가 칩을 세로로 세워 두 줄을 더 쓰던 것을 가로로 되돌린다 */
	.fhs-shop-top .fhs-chip-row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* 초기화 버튼 — 코어는 배경만 흰색으로 두고 글자색을 지정하지 않아
   테마(Astra)의 전역 버튼 흰 글자가 그대로 남아 "흰 바탕에 흰 글자"가 된다. */
.fhs-filterbar__reset,
.fhs-shop--musinsa .fhs-filterbar__reset {
	color: #111;
}

.fhs-filterbar__reset:hover {
	color: #532B83;
	border-color: #532B83;
}

@media (max-width: 768px) {
	/* 가격 입력이 줄어들지 않아 행이 화면 밖으로 넘치던 문제.
	   flex 아이템의 기본 min-width:auto 를 풀어 준다. */
	.fhs-shop-top .fhs-filterbar__price {
		min-width: 0;
	}

	.fhs-shop-top .fhs-filterbar__price input {
		min-width: 0;
	}

	.fhs-shop-top .fhs-filterbar__search {
		min-width: 0;
	}
}