/* ============================================================
   상품 카드 호버 액션 (장바구니 / 상품검색)
   - construct/items.php, product_search.php, item.php 카드 그리드 공용
   - 마크업: .bq-item-card > ( a.bq-item-main + .bq-card-hover > button.bq-card-btn )
   ============================================================ */

/* 카드가 오버레이의 기준점이 된다 */
.bq-item-card,
.bq-rel-card { position: relative; }

/* 기존 <a> 였던 카드 본문은 내부 링크로 내려도 시각 그대로 유지 */
.bq-item-card > .bq-item-main,
.bq-rel-card > .bq-item-main {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ---------- 호버 오버레이 ---------- */
.bq-card-hover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 2;
}

/* 이미지 영역과 동일한 높이로 덮는다 (썸네일 200px 고정) */
.bq-item-card .bq-card-hover { height: 200px; }
/* 관련 상품 카드는 이미지가 1:1 정사각형 */
.bq-rel-card .bq-card-hover { aspect-ratio: 1 / 1; }

.bq-item-card:hover > .bq-card-hover,
.bq-item-card:focus-within > .bq-card-hover,
.bq-rel-card:hover > .bq-card-hover,
.bq-rel-card:focus-within > .bq-card-hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- 버튼 ---------- */
.bq-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--bq-border, #E6EAED);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  color: var(--bq-primary, #F47C20);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.bq-card-btn i,
.bq-card-btn svg { font-size: .85rem; }
.bq-card-btn:hover {
  background: var(--bq-primary, #F47C20);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 124, 32, .3);
}
.bq-card-btn:focus-visible {
  outline: 2px solid var(--bq-primary, #F47C20);
  outline-offset: 2px;
}
/* 요청 진행 중 중복 클릭 방지 */
.bq-card-btn.is-busy { opacity: .6; pointer-events: none; }

/* ---------- 터치 기기: 항상 표시 ---------- */
@media (hover: none) {
  .bq-card-hover { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* ---------- 좁은 화면: 라벨은 아이콘만 ---------- */
@media (max-width: 480px) {
  .bq-card-btn span { display: none; }
  .bq-card-btn { padding: 7px 10px; }
}

/* ---------- 우측 사이드 레일(64px 썸네일)에는 액션 버튼 미부착 ----------
   카드는 block, 정렬(이미지|정보 가로)은 내부 링크가 맡는다.
   .skel(로딩 스켈레톤)은 기존 flex 구조를 그대로 쓰므로 제외 */
.bq-rel-side .bq-rel-card:not(.skel) { display: block !important; padding: 0 !important; }
.bq-rel-side .bq-rel-card:not(.skel) > .bq-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}
.bq-rel-side .bq-card-hover { display: none !important; }

/* ---------- 토스트 ---------- */
.bq-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}
.bq-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
  padding: 10px 18px;
  background: rgba(26, 32, 44, .92);
  color: #fff;
  border-radius: 22px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.bq-toast.show { opacity: 1; transform: translateY(0); }
.bq-toast.ok { background: rgba(244, 124, 32, .95); }
.bq-toast.err { background: rgba(200, 45, 45, .95); }