/* fluxshop 장바구니 v2 — 시안 visual/mock/pf.css 4절(장바구니)·8절(반응형) 그대로.
   공통 부품(체크박스·스테퍼·가격·계량줄·사다리·버튼)은 purchase-base.css. 색 값은 var(--pf-*) 만 쓴다(리터럴 0).
   장바구니 화면 밖에서도 파일이 실리므로 선택자는 장바구니 전용 이름 또는 .fhs-pf-page 아래로만 둔다. */

/* 페이지 바탕 — 시안의 .fhs-pf 바탕(테마 영역 안에서만 칠한다).
   폭 구간은 주문서와 같이 화면 폭(@media 1023/767)으로 본다(검수 F2: 본문 폭 제약을 풀었으므로 영역 폭 = 화면 폭 - 테마 여백). 하단 고정 바·떠 있는 버튼 숨김도 같은 기준이다. */
.fhs-pf-page { background: var(--pf-canvas); padding-bottom: 64px; }
/* 검수 F2: 블록 테마의 constrained 레이아웃(.is-layout-constrained > * { max-width: 본문폭 })이 장바구니를 본문 폭(예: 645)에 가둔다 — 주문서(purchase-checkout.css)와 같이 max-width 를 풀어 시안 1080 이 되게 한다(안쪽 .fhs-pf-wrap 이 1080 가운데) */
.fhs-pf-page { max-width: none; }
.fhs-pf-page #fhs-cart-root { color: var(--pf-text); }
.fhs-pf-wrap { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.fhs-pf-title { display: flex; align-items: baseline; gap: 8px; margin: 40px 0 24px; font-size: 24px; line-height: 1.4; font-weight: 700; }
.fhs-pf-title small { font-size: 24px; font-weight: 400; color: var(--pf-text-3); }

/* 1.39.1: 2열 전환은 화면 폭이 아니라 본문 틀(.fhs-pf-wrap)의 실제 폭으로 본다 — 본문을 480px 같은 좁은 틀로 쓰는 테마에서 1280 화면일 때 격자가 눌렸다.
   기본은 1열(컨테이너 쿼리를 모르는 브라우저도 안전한 쪽). 틀이 720 이상일 때만 2열(= 화면 768 이상의 옛 기준과 같다).
   container-type 은 fixed 자손의 기준 상자를 바꾸므로 하단 고정 바가 쓰이는 화면 ≤767 에서는 켜지 않는다(그 구간은 어차피 1열). */
.fhs-pf-layout { display: block; padding-bottom: 64px; }
@media (min-width: 768px) {
	.fhs-pf-layout > aside { margin-top: 24px; }
	.fhs-pf-wrap { container-type: inline-size; container-name: fhspf; }
}
@container fhspf (min-width: 720px) {
	.fhs-pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 376px; gap: 24px; align-items: start; }
	.fhs-pf-layout > aside { margin-top: 0; }
}
@container fhspf (min-width: 720px) and (max-width: 975px) {
	.fhs-pf-layout { grid-template-columns: minmax(0, 1fr) 336px; }
}
@container fhspf (max-width: 719px) {
	.fhs-pf-layout .fhs-pf-summary { position: static; }
}
.fhs-pf-selbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 24px; border-bottom: 1px solid var(--pf-line); }
.fhs-pf-selbar__act { display: flex; align-items: center; gap: 4px; }
.fhs-pf-group { padding: 24px 24px 8px; font-size: 16px; font-weight: 700; }
.fhs-pf-page .fhs-cart-list > .fhs-pf-group:not(:first-child) { margin-top: 8px; border-top: 1px solid var(--pf-line); }

.fhs-pf-page .fhs-cart-row { position: relative; display: grid; grid-template-columns: 20px 72px minmax(0, 1fr) 120px; grid-template-areas: "chk img info ctl"; align-items: start; gap: 0 12px; margin: 0 24px; padding: 20px 0; border: 0; border-top: 1px solid var(--pf-line); }
.fhs-pf-page .fhs-cart-list > .fhs-cart-row:first-child, .fhs-pf-page .fhs-pf-group + .fhs-cart-row { border-top: 0; }
.fhs-pf-page .fhs-cart-row .fhs-pf-chk { grid-area: chk; align-self: start; margin: -12px 0 0 -12px; width: 44px; justify-content: center; }
.fhs-pf-page .fhs-cart-row .fhs-pf-thumb { overflow: hidden; align-self: start; }
.fhs-pf-page .fhs-cart-row .fhs-pf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fhs-pf-page .fhs-pf-row__info { grid-area: info; min-width: 0; padding: 0 32px 0 4px; }
.fhs-pf-page .fhs-pf-row__name { font-size: 16px; line-height: 1.5; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fhs-pf-page .fhs-pf-row__opt { margin-top: 2px; font-size: 14px; color: var(--pf-text-3); }
.fhs-pf-page .fhs-pf-row__ctl { grid-area: ctl; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.fhs-pf-page .fhs-pf-row__sub { display: flex; flex-direction: column; align-items: flex-end; font-size: 16px; font-weight: 700; }
.fhs-pf-page .fhs-pf-row__sub s { font-size: 13px; font-weight: 400; color: var(--pf-text-3); }
.fhs-pf-page .fhs-cart-row__del { position: absolute; top: 8px; right: -12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 0; background: none; color: var(--pf-text-3); }
.fhs-pf-page .fhs-cart-row__del:hover { color: var(--pf-text); }
.fhs-pf-page .fhs-cart-row .fhs-pf-cap { margin-top: 4px; }
.fhs-pf-page .fhs-cart-row--soldout .fhs-pf-row__name, .fhs-pf-page .fhs-cart-row--soldout .fhs-pf-row__opt { color: var(--pf-disabled); }
.fhs-pf-page .fhs-cart-row--soldout .fhs-pf-thumb { opacity: .45; }
/* 좁은 칸에서도 금액·버튼 글자가 글자 단위로 쪼개지지 않게(base 의 overflow-wrap:anywhere 보정) */
.fhs-pf-page .fhs-pf-price__now { flex-wrap: wrap; }
.fhs-pf-page .fhs-pf-price__rate, .fhs-pf-page .fhs-pf-price__sell, .fhs-pf-page .fhs-pf-price__reg, .fhs-pf-page .fhs-pf-row__sub span, .fhs-pf-page .fhs-pf-row__sub s, .fhs-pf-page .fhs-pf-textbtn, .fhs-pf-page .fhs-pf-chk span { white-space: nowrap; }
.fhs-pf-page .fhs-pf-row__soldout { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--pf-text-2); }

.fhs-pf-summary { position: sticky; top: 24px; padding: 24px; }
.fhs-pf-summary h2 { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.fhs-pf-bar { margin-top: 20px; }
.fhs-pf-bar .fhs-pf-freeship--bar { display: none; }
.fhs-pf-summary .fhs-pf-cap { margin-top: 12px; }
/* fluxshop.js(applyCartTotals)가 옛 모양 줄을 잠깐 끼워 넣을 수 있다 — 이 화면 스크립트가 곧 다시 그리므로 보이지 않게 */
.fhs-pf-ladder > .fhs-cart-summary__line { display: none; }

.fhs-pf-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 24px; text-align: center; }
.fhs-pf-empty svg { width: 48px; height: 48px; margin-bottom: 16px; color: var(--pf-text-3); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fhs-pf-empty h3 { font-size: 18px; font-weight: 600; }
.fhs-pf-empty p { margin: 8px 0 24px; font-size: 14px; color: var(--pf-text-3); }
.fhs-pf-empty .fhs-pf-cta { width: 200px; height: 48px; font-size: 16px; }
.fhs-pf-page:has(.fhs-pf-empty) { padding-bottom: 64px; }

@media (max-width: 767px) {
	.fhs-pf-wrap { width: 100%; }
	.fhs-pf-title { margin: 0; padding: 0 16px; height: 56px; align-items: center; font-size: 20px; background: var(--pf-sheet); }
	.fhs-pf-title small { font-size: 20px; }
	.fhs-pf-layout { display: block; padding-bottom: 0; }
	.fhs-pf-layout > aside { margin-top: 8px; }
	.fhs-pf-sheet { border-radius: 0; }
	.fhs-pf-selbar { min-height: 52px; padding: 0 16px; }
	.fhs-pf-group { padding: 16px 16px 0; }
	.fhs-pf-page .fhs-cart-row { grid-template-columns: 20px 64px minmax(0, 1fr); grid-template-areas: "chk img info" "chk img ctl"; margin: 0 16px; padding: 16px 0; }
	.fhs-pf-page .fhs-cart-row .fhs-pf-thumb { width: 56px; height: 56px; }
	.fhs-pf-page .fhs-pf-row__info { padding-right: 28px; }
	.fhs-pf-page .fhs-pf-row__ctl { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 8px; }
	.fhs-pf-page .fhs-pf-row__sub { margin-left: auto; }
	.fhs-pf-page .fhs-cart-row__del { right: -14px; top: 4px; }
	.fhs-pf-summary { position: static; padding: 20px 16px; }
	.fhs-pf-ladder__row { min-height: 30px; }
	.fhs-pf-empty { padding: 64px 16px; }
}
/* 화면 폭 ≤767: 주문 바를 아래에 고정하고, 겹치는 떠 있는 버튼(장바구니 FAB·공용 독·상담 위젯)은 이 화면에서 숨긴다 */
@media (max-width: 767px) {
	.fhs-pf-page { padding-bottom: 128px; }
	.fhs-pf-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--pf-sheet); box-shadow: var(--pf-shadow-bar); }
	.fhs-pf-bar .fhs-pf-freeship--bar { display: block; }
	.fhs-pf-bar .fhs-pf-freeship--bar[hidden] { display: none; }
	body:has(.fhs-pf-bar) #fhs-cart-fab, body:has(.fhs-pf-bar) .fhc-dock, body:has(.fhs-pf-bar) .fcs-w { display: none !important; }
}

/* 검수 D2: 옛 스킨 규칙 .fluxshop-cart{max-width:1160;padding:32px 20px 80px}(skin.css)·.fluxshop-cart.fx-ui 가 v2 루트에도 걸려 모바일에 흰 띠·좁은 정보 칸이 생겼다 — 폭·여백은 .fhs-pf-wrap(시안 1080 / 모바일 풀폭)이 정한다 */
.fhs-pf-page #fhs-cart-root.fluxshop-cart { max-width: none; margin: 0 auto; padding: 0; background: none; }
@media (max-width: 767px) {
	.fhs-pf-page #fhs-cart-root.fluxshop-cart { margin: 0; }
}
/* 검수 D6: 빈 장바구니 — 스킨의 .fluxshop-cart__empty{color:muted} 상속과 안내문 굵기 300 을 시안 값으로 고정 */
.fhs-pf-page .fhs-pf-empty.fluxshop-cart__empty { padding: 64px 24px; color: var(--pf-text); }
.fhs-pf-page .fhs-pf-empty.fluxshop-cart__empty svg { margin-bottom: 16px; color: var(--pf-text-3); }
.fhs-pf-page .fhs-pf-empty h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--pf-text); }
.fhs-pf-page .fhs-pf-empty p { margin: 8px 0 24px; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--pf-text-3); }
@media (max-width: 767px) {
	.fhs-pf-page .fhs-pf-empty.fluxshop-cart__empty { padding: 64px 16px; }
}
/* 검수 D2: 모바일은 테마 본문 여백(예: 30px)을 뚫고 화면 폭 전체를 쓴다(시안: 흰 띠가 화면 끝까지) */
@media (max-width: 767px) {
	.fhs-pf-page { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: none; }
}