/* ──────────────────────────────────────────────────────────────
 * 장바구니 (WooCommerce Blocks) — 브랜드 스타일
 * 대상 블록: wp:woocommerce/cart  (셀렉터 .wp-block-woocommerce-* / .wc-block-*)
 * classic 셀렉터(.woocommerce-cart table.cart 등)와 다름 — 혼동 금지.
 * 본문에 wp:html 로 넣는 .bsmt-cart-steps / .bsmt-cart-quote-cta 도 함께 정의.
 * 로드: functions.php 에서 bsmt_b2b_is_wc_page('cart') (is_cart() OR cart 페이지 ID) 일 때 enqueue.
 * ────────────────────────────────────────────────────────────── */

/* ── 본문 상단 단계 표시 (wp:html 블록) ── */
.bsmt-cart-steps {
  max-width: var(--container); margin: 0 auto var(--s-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--c-fg-3); padding: 0 var(--s-2);
}
.bsmt-cart-steps .st { display: inline-flex; align-items: center; gap: 7px; }
.bsmt-cart-steps .st .n { width: 22px; height: 22px; border-radius: 50%; background: var(--c-border); color: var(--c-fg-3); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.bsmt-cart-steps .st.is-active { color: var(--c-primary); font-weight: 700; }
.bsmt-cart-steps .st.is-active .n { background: var(--c-primary); color: #fff; }
.bsmt-cart-steps .sep { color: var(--c-border-strong); }

/* 페이지 제목(wp:heading)도 컨테이너 폭에 맞춤 */
.woocommerce-cart .entry-content > h1:first-child,
.page-template-default .wp-block-woocommerce-cart { /* no-op guard */ }

/* ── Cart 블록 래퍼 — 2열(품목 + 요약) ── */
.wp-block-woocommerce-cart {
  max-width: var(--container); margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-16);
}
/* ── Cart 2열(품목 + 요약) 레이아웃 ──────────────────────────────
   증상: 데스크탑 넓은 폭에서 양쪽 컬럼 모두 비정상적으로 좁아짐(브라우저 폭 좁히면 정상).
   원인: WC Blocks 가 컨테이너 폭에 따라 .is-large 클래스를 동적으로 붙이며 자체 flex 폭
         (예: .wc-block-cart__main { width: calc(100% - 417px) }) 을 강제. :has() 로 부모에만
         grid 를 걸어도, 자식 컬럼에 남은 WC 기본 width/flex/margin 이 우리 트랙을 압축.
   해법: 1) 컨테이너 셀렉터 단순화 — 10.x(.wp-block-woocommerce-filled-cart-block) +
           legacy(form.wc-block-cart) 두 케이스만 직접 명시(둘이 동시에 grid 컨테이너로
           겹치는 DOM 은 존재하지 않음).
         2) 안쪽 두 컬럼의 width/flex/max-width/margin 을 명시적으로 reset(.is-large 무력화).
   ────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block,
.wp-block-woocommerce-cart > form.wc-block-cart {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: var(--s-8) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
/* 양쪽 컬럼 공통 — WC .is-large 가 거는 width/flex/margin 을 전면 무력화 */
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 합계 컬럼만 sticky */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
  position: sticky;
  top: var(--s-5);
}

/* ── 품목 테이블 ── */
table.wc-block-cart-items {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
}
table.wc-block-cart-items .wc-block-cart-items__header {
  background: var(--c-primary-softer); color: var(--c-primary);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: none;
}
table.wc-block-cart-items .wc-block-cart-items__header th { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-primary-tint); }

/* ── 테이블 헤더 라벨 강제 ───────────────────────────────────────
   요구: 썸네일 + 상품정보 두 셀을 묶어 "상품", 마지막 셀은 "합계".
   WC Blocks 헤더는 React 컴포넌트라 PHP/wp-admin 에서 텍스트 편집 불가 →
   기존 텍스트는 font-size:0 으로 숨기고 ::before 로 우리 라벨을 박는다.
   클래스 매칭(.wc-block-cart-items__header-image/__product/__total)을 우선,
   클래스가 다른 WC 버전도 대비해 first-child/last-child 셀렉터로 fallback. */
table.wc-block-cart-items .wc-block-cart-items__header th {
  font-size: 0 !important; /* 기존 텍스트(WC 번역 라벨) 숨김 */
  text-align: left;
}
table.wc-block-cart-items .wc-block-cart-items__header th::before {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-primary);
}
/* 첫 셀(썸네일 헤더) → "상품" */
table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-image::before,
table.wc-block-cart-items .wc-block-cart-items__header th:first-child::before {
  content: "상품";
}
/* 가운데 셀(상품정보 헤더) → 비움 (썸네일 헤더와 시각적으로 한 묶음) */
table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product::before {
  content: "";
}
/* 마지막 셀(합계 헤더) → "합계" (text-align: right 로 컬럼 정렬과 일치) */
table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-total,
table.wc-block-cart-items .wc-block-cart-items__header th:last-child {
  text-align: right;
}
table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-total::before,
table.wc-block-cart-items .wc-block-cart-items__header th:last-child::before {
  content: "합계";
}
/* 가운데 셀이 마지막 셀로 잡혀 "합계" 가 가운데에 박히는 fallback 충돌 방지 —
   클래스가 명시된 경우엔 클래스 우선 (구체성으로 이김). */
table.wc-block-cart-items .wc-block-cart-items__row td { padding: var(--s-4); border-top: 1px solid var(--c-border); vertical-align: top; }
.wc-block-cart-item__image img { border-radius: var(--r-md); border: 1px solid var(--c-border); }
.wc-block-cart-item__product .wc-block-components-product-name {
  color: var(--c-fg-1) !important; font-weight: 600; font-size: 14px; text-decoration: none;
}
.wc-block-cart-item__product .wc-block-components-product-name:hover { color: var(--c-primary) !important; }
.wc-block-cart-item__product .wc-block-cart-item__prices .price,
.wc-block-cart-item__total .wc-block-components-product-price { font-variant-numeric: tabular-nums; }
.wc-block-cart-item__total .wc-block-components-product-price { font-weight: 700; color: var(--c-fg-1); }
.wc-block-components-product-metadata { font-size: 12px; color: var(--c-fg-3); }

/* 안전망: 상품 설명(description)에 임베드된 detail 이미지가 cart 품목 정보 셀로
   흘러나와 거대 사이즈로 출력되는 케이스 방지. 썸네일 셀(.wc-block-cart-item__image)은 제외. */
.wc-block-cart-item__product img,
.wc-block-components-product-metadata img { display: none !important; }

/* 수량 스테퍼 */
.wc-block-components-quantity-selector {
  border: 1px solid var(--c-border-strong) !important; border-radius: var(--r-sm) !important; overflow: hidden; max-width: 110px;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-variant-numeric: tabular-nums; font-weight: 600; }
.wc-block-components-quantity-selector__button { color: var(--c-fg-2) !important; }
.wc-block-components-quantity-selector__button:hover { color: var(--c-primary) !important; background: var(--c-surface-alt) !important; }

/* 삭제 링크 */
.wc-block-cart-item__remove-link { color: var(--c-fg-4) !important; font-size: 12px !important; }
.wc-block-cart-item__remove-link:hover { color: var(--c-danger) !important; }

/* ── 주문 요약(합계) 박스 ── */
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5);
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item {
  display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-3) 0; font-size: 14px; color: var(--c-fg-1);
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item__label { color: var(--c-fg-3); font-size: 13px; }
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item {
  border-top: 2px solid var(--c-primary); margin-top: var(--s-2); padding-top: var(--s-4);
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--c-primary) !important; font-size: 22px; font-weight: 800;
}

/* 결제 진행 버튼 */
.wp-block-woocommerce-proceed-to-checkout-block { margin-top: var(--s-4); }
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-primary) !important; color: #fff !important; border-radius: var(--r-md) !important;
  padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; border: 0 !important; text-decoration: none;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover { background: var(--c-primary-hover) !important; }

/* ── 견적 전환 CTA + VAT 안내 (wp:html 블록, 요약 박스 아래) ── */
.bsmt-cart-quote-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  color: var(--c-fg-2); text-decoration: none; font-size: 14px; font-weight: 600; margin-top: 10px;
}
.bsmt-cart-quote-cta:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bsmt-cart-vat { font-size: 12px; color: var(--c-fg-4); text-align: center; margin-top: 8px; }

/* 빈 장바구니 */
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title { color: var(--c-fg-1); }

@media (max-width: 860px) {
  .wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block,
  .wp-block-woocommerce-cart > form.wc-block-cart { grid-template-columns: 1fr !important; }
  .wp-block-woocommerce-cart .wc-block-cart__sidebar,
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block { position: static; }
}