/* =============================================================
 *  IbioScience — 공통 상품 카드 스타일
 *  ==============================================================
 *  대상: .product-item-container (메인, 리스트, 상세 추천 등 어디서나 일관 적용)
 *  주요 원칙:
 *    1) 카드: 부드러운 라운드 + 호버 시 상승 그림자
 *    2) 이미지 영역: 옅은 회색 배경(빈 슬롯에서도 어색하지 않음)
 *    3) 가격: 쇼핑몰 네이비(#094BAD) 16pt 강조, 정가는 작은 회색 취소선
 *    4) 라벨: 11px 굵은 색상칩 + 미세 그림자
 *
 *  /front/css/page/ 디렉토리 위치 — 다른 페이지별 CSS와 동일 레벨로 관리.
 *  fragments/front/common.html (frontHead) 에서 전 페이지에 자동 로드.
 * ============================================================= */

/* ── 카드 본체 ── */
.product-item-container {
	background: #fff;
	border: 1px solid #f0f1f3;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-item-container:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
	border-color: transparent;
}
.product-item-container .left-block { background: #fafafa; }
.product-item-container .right-block { padding: 12px 14px 14px; }

/* productList 그리드 카드 — 이미지가 카드 외곽선 안쪽에 맞도록 보정 */
.product-item-container.grid-container .left-block { padding: 0; }
.product-item-container.grid-container .left-block .product-image-container { overflow: hidden; }
.product-item-container.grid-container .left-block .product-image-container img {
	width: 100%;
	height: auto;
	display: block;
}
/* productList grid 카드의 가운데 상품명·가격은 가운데 정렬 유지 */
.product-item-container.grid-container .caption { text-align: center; padding-top: 4px; }
.product-item-container.grid-container .item-desc {
	text-align: center;
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

/* ── 상품 라벨 ── */
.box-label { gap: 4px; }
.box-label .label-product {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: -0.2px;
	line-height: 1.3;
	box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.box-label .label-product.label-sale {
	background: #ef4444;
	color: #fff;
}
.box-label .ibio-product-source-company { background: #094BAD; color: #fff; }
.box-label .ibio-product-source-dealer  { background: #0ea5e9; color: #fff; }

/* ── 가격 영역 (쇼핑몰 네이비 톤, 16pt) ── */
.product-item-container .price {
	padding: 8px 0 6px;
	gap: 8px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}
/* 현재가 — PC/모바일 동일 사이즈로 유지 (모바일 별도 분기 없음).
   여기서 정의한 14pt / weight 600 이 모든 뷰포트에서 그대로 적용된다. */
.product-item-container .price .price-new {
	color: #094BAD;
	font-size: 14pt;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.2;
}
.product-item-container .price .price-old {
	font-size: 12pt;
	color: #9ca3af;
	text-decoration: line-through;
	font-weight: 400;
}
.product-item-container .price .price-discount-badge {
	background: #eef3fb;
	color: #094BAD;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11pt;
	font-weight: 700;
	display: inline-block;
}

/* 빈 값 숨김 (FOUC 완화) */
.product-item-container .price .price-new:empty,
.product-item-container .price .price-old:empty,
.product-item-container .price .price-discount-badge:empty { display: none; }

/* ── 상품명 ── */
.product-item-container .caption h4 { margin: 6px 0 6px; }
.product-item-container .caption h4 a {
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.15s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.product-item-container .caption h4 a:hover { color: #094BAD; }

/* ── 평점 ── */
.product-item-container .ratings { margin-bottom: 4px; }
.product-item-container .ratings .rating-num { color: #9ca3af; font-size: 12px; }
.product-item-container .ratings .rating-box i.fa-star { color: #f59e0b; }
.product-item-container .ratings .rating-box i.fa-star-o { color: #d1d5db; }