/* ===== 상단 필터 영역 ===== */
@media(max-width:765px) {
	.product-list-filter {
		display: flex;
	}

	.product-list-filter .form-group {
		width: 33%;
	}
}

/* ===== LIST 모드 - 핵심: product-layout 전체 폭 + 블록 배치 ===== */
.products-list.list .product-layout {
	width: 100% !important;
	flex: 0 0 100% !important;
	max-width: 100% !important;
	display: block !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-bottom: 0;
}

/* ===== LIST 모드 - 헤더 ===== */
.list-header {
	background-color: #f3f5f7;
	border-bottom: 2px solid #dee2e6;
	padding: 12px 0;
	margin-bottom: 0;
	width: 100% !important;
	flex: 0 0 100% !important;
}

.list-header-row {
	display: flex;
	align-items: center;
}

.lh-col {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	padding: 0 12px;
}

.lh-col-name  { flex: 1 1 0; min-width: 0; padding-left: 16px; }
.lh-col-brand { width: 120px; text-align: center; }
.lh-col-price { width: 130px; text-align: center; }
.lh-col-option{ width: 140px; text-align: center; }

/* ===== LIST 모드 - 상품 행 ===== */
/* list 모드에서만 list-container 표시 */
.products-list.list .list-container {
	display: block !important;
	width: 100% !important;
	border-bottom: 1px solid #e9ecef;
}

.list-row {
	display: flex;
	align-items: center;
	padding: 14px 0;
	min-height: 100px;
}

.list-col {
	padding: 0 12px;
}

.list-col-name  { flex: 1 1 0; min-width: 0; }
.list-col-brand { width: 120px; text-align: center; font-size: 14px; color: #555; }
.list-col-price { width: 130px; text-align: center; font-size: 15px; font-weight: 600; color: #333; }
.list-col-option{ width: 140px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* 상품명 영역 (이미지 + 텍스트) */
.list-product-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.list-product-img {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
}

.list-product-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

.list-product-text {
	flex: 1;
	min-width: 0;
}

.list-product-text h4 {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.4;
}

.list-product-text h4 a {
	color: #333;
	text-decoration: none;
}

.list-product-text h4 a:hover {
	color: #1e88e5;
}

.list-product-desc {
	font-size: 12px;
	color: #888;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ===== 견적문의 / 옵션 / 관심상품 버튼 ===== */
.product-list-quote-btn {
	width: 120px;
	font-weight: 600;
	border: 1px solid #2e7d32;
	background: #fff;
	color: #2e7d32;
	padding: 6px 10px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1;
	transition: .2s;
	cursor: pointer;
}

.product-list-quote-btn:hover {
	background: #2e7d32;
	color: #fff;
}

.product-list-option-btn,
.product-list-wish-btn {
	width: 120px;
	font-weight: 600;
	border: 1px solid #1e88e5;
	background: #fff;
	color: #1e88e5;
	padding: 6px 10px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1;
	transition: .2s;
	cursor: pointer;
}

.product-list-wish-btn {
	border-color: #e53935;
	color: #e53935;
}

.product-list-option-btn:hover,
.product-list-wish-btn:hover {
	color: #fff;
}

.product-list-option-btn:hover {
	background: #1e88e5;
}

.product-list-wish-btn:hover {
	background: #e53935;
	border-color: #e53935;
}

.product-list-option-btn[aria-expanded="true"] {
	background: #1e88e5;
	color: #fff;
}

.product-list-option-btn .fa {
	transition: transform .2s;
}

.product-list-option-btn[aria-expanded="true"] .fa {
	transform: rotate(180deg);
}

/* ===== 옵션 패널 (상품 행 아래에 위치) ===== */
.product-list-option-panel {
	display: none;
	width: 100% !important;
	border: 1px solid #e5e5e5;
	border-top: none;
	margin-bottom: 0;
}

.product-list-option-inner {
	padding: 16px 20px;
	background: #fafafa;
}

.product-list-option-table {
	width: 100%;
	margin-bottom: 0;
}

.product-list-option-table > thead > tr > th,
.product-list-option-table > tbody > tr > td {
	vertical-align: middle;
	font-size: 13px;
	padding: 10px 12px;
}

.product-list-option-table > thead > tr > th {
	background: #f3f5f7;
	color: #333;
	font-weight: 600;
	border-bottom: 2px solid #dee2e6;
}

.product-list-option-table .product-list-qty {
	width: 90px;
}

.product-list-option-table .product-list-qty-input {
	height: 32px;
	padding: 2px 6px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	text-align: center;
	width: 60px;
}

/* ── 재고 0 옵션 row 비활성 표시 ─────────────────────────────────────
 *  · 데스크탑 <tr>, 모바일 .pd-m-opt-card 양쪽에 동일 클래스 적용
 *  · checkbox / qty input 자체는 JS 가드에서 비활성 처리, CSS 는 시각 표시만 담당
 *  · 텍스트 dim + cursor not-allowed 로 "선택 불가" 신호 */
.product-list-option-row-out-of-stock {
	background-color: #f8f9fa;
	color: #adb5bd;
}
.product-list-option-row-out-of-stock td,
.product-list-option-row-out-of-stock .pd-m-opt-name,
.product-list-option-row-out-of-stock .pd-m-opt-catno,
.product-list-option-row-out-of-stock .pd-m-opt-price {
	color: #adb5bd !important;
}
.product-list-option-row-out-of-stock .product-list-row-check,
.product-list-option-row-out-of-stock .product-list-qty-input {
	cursor: not-allowed;
	background-color: #f1f3f5;
}
.product-list-option-row-out-of-stock .product-list-row-check {
	opacity: 0.5;
}

/* 총액 */
.product-list-total {
	text-align: right;
	font-size: 14px;
	padding: 12px 6px;
	border-top: 1px solid #e5e5e5;
	background: #fff;
}

.product-list-total-label {
	margin-right: 6px;
	color: #333;
}

.product-list-total-price {
	font-weight: 800;
	font-size: 20px;
	color: #333;
}

.product-list-won {
	margin-left: 2px;
	font-size: 14px;
}

/* 안내문구 */
.product-list-notes {
	margin: 10px 0 14px;
	padding-left: 16px;
	color: #777;
	font-size: 12px;
	line-height: 1.6;
}

/* 하단 버튼 */
.product-list-bottom-btns {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	text-wrap: nowrap;
}

.product-list-btn {
	border: 1px solid transparent;
	padding: 7px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: .2s;
}

.product-list-btn-quote {
	background: #2e7d32;
	color: #fff;
	border-color: #2e7d32;
}

.product-list-btn-buy,
.product-list-btn-cart {
	background: #0d47a1;
	color: #fff;
	border-color: #0d47a1;
}

.product-list-btn:hover {
	filter: brightness(0.9);
}

/* ===== 반응형 - 태블릿 ===== */
@media (max-width: 1199px) {
	.list-product-img {
		width: 80px;
		height: 80px;
	}
	.lh-col-brand, .list-col-brand { width: 100px; }
	.lh-col-price, .list-col-price { width: 110px; }
	.lh-col-option, .list-col-option { width: 130px; }
	.product-list-quote-btn,
	.product-list-option-btn,
	.product-list-wish-btn { width: 110px; font-size: 12px; }
}

/* ===== 반응형 - 모바일 ===== */
@media (max-width: 991px) {
	.m-d-n { display: none !important; }
	.m-h-100 { height: 100%; }

	.list-header { display: none !important; }

	.list-row {
		flex-wrap: wrap;
		padding: 12px 0;
	}

	.list-col-name {
		width: 100%;
		flex: none;
	}

	.list-product-img {
		width: 80px;
		height: 80px;
	}

	.product-list-option-inner { padding: 10px; }
	.product-list-notes { padding-left: 0; }

	/* 모바일 옵션 테이블: 각 컬럼을 tr(row)로 변환 */
	.product-list-option-table {
		border: none;
	}

	.product-list-option-table thead {
		display: none;
	}

	/* --- 모바일 옵션 카드 --- */
	.product-list-option-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #dee2e6;
		border-radius: 6px;
		margin-bottom: 10px;
		background: #fff;
		overflow: hidden;
	}

	/* 공통 td */
	.product-list-option-table tbody tr td {
		display: flex;
		align-items: center;
		padding: 10px 12px;
		border-bottom: 1px solid #f0f0f0;
		font-size: 13px;
		line-height: 1.5;
		width: 100%;
		flex: 0 0 100%;
		order: 1;
		box-sizing: border-box;
		min-width: 0;
		word-break: break-word;
	}

	/* 라벨 배지 */
	.product-list-option-table tbody tr td::before {
		content: attr(data-label);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 70px;
		padding: 4px 8px;
		font-weight: 600;
		font-size: 12px;
		color: #333;
		background: #f3f5f7;
		border-radius: 4px;
		flex-shrink: 0;
		margin-right: 10px;
	}

	/* ── 1행: 선택(체크) + Cat.No ── */
	.product-list-option-table tbody tr td[data-label="선택"] {
		order: 0;
		width: 36px;
		flex: 0 0 36px;
		padding: 10px 0 10px 10px;
		border-bottom: none;
		justify-content: center;
	}
	.product-list-option-table tbody tr td[data-label="선택"]::before {
		display: none;
	}
	.product-list-option-table tbody tr td[data-label="선택"] .product-list-row-check {
		width: 18px;
		height: 18px;
	}

	.product-list-option-table tbody tr td[data-label="Cat. No"] {
		order: 0;
		width: calc(100% - 36px);
		flex: 0 0 calc(100% - 36px);
		padding-left: 0;
	}
	.product-list-option-table tbody tr td[data-label="Cat. No"]::before {
		font-weight: 700;
	}

	/* ── 2행: 품명 (3줄 말줄임) ── */
	.product-list-option-table tbody tr td[data-label="품명"] {
		order: 2;
		max-height: calc(1.5em * 3 + 22px);
		overflow: hidden;
	}

	/* ── 3행: 판매가 ── */
	.product-list-option-table tbody tr td[data-label="판매가"] {
		order: 3;
	}

	/* ── 4행: 단위 + 수량 나란히 ── */
	.product-list-option-table tbody tr td[data-label="단위"] {
		order: 4;
		width: 50%;
		flex: 0 0 50%;
		border-right: 1px solid #f0f0f0;
		border-bottom: none;
	}
	.product-list-option-table tbody tr td[data-label="단위"]::before {
		min-width: auto;
	}

	.product-list-option-table tbody tr td[data-label="수량"] {
		order: 4;
		width: 50%;
		flex: 0 0 50%;
		border-bottom: none;
	}
	.product-list-option-table tbody tr td[data-label="수량"]::before {
		min-width: auto;
	}
	.product-list-option-table tbody tr td .product-list-qty-input {
		width: 48px;
		height: 28px;
		padding: 2px 4px;
		font-size: 13px;
	}

	/* 모바일 하단 바: 견적문의 + 좋아요 + 옵션 버튼 */
	.product-list-list-mobilebar {
		display: block !important;
		visibility: visible !important;
		margin-top: 10px;
		padding-left: 96px;
	}

	.product-list-list-price {
		margin-bottom: 10px;
		font-size: 13px;
		color: #333;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.product-list-list-quote {
		color: #0d47a1;
		text-decoration: none;
	}

	.product-list-list-pipe {
		color: #bdbdbd;
	}

	.product-list-list-icons {
		display: flex;
		gap: 8px;
	}

	.product-list-list-iconbtn {
		border: 1px solid #d9d9d9;
		background: #fff;
		color: #333;
		width: 36px;
		height: 36px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: .2s;
	}

	.product-list-list-iconbtn:hover {
		border-color: #999;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	}

	.product-list-list-quote-m {
		color: #2e7d32;
		border-color: #b6d7b6;
	}

	.product-list-list-quote-m:hover {
		background: #2e7d32;
		color: #fff;
		border-color: #2e7d32;
	}

	.product-list-list-wish {
		color: #c2185b;
		border-color: #e6a6ba;
	}

	.product-list-list-wish.active,
	.product-list-list-wish:hover {
		background: #c2185b;
		color: #fff;
		border-color: #c2185b;
	}

	.product-list-list-option {
		color: #1e88e5;
		border-color: #a7c9f0;
	}

	.product-list-list-option.active,
	.product-list-list-option:hover {
		background: #1e88e5;
		color: #fff;
		border-color: #1e88e5;
	}
}

/* 기본(PC)은 모바일바 숨김 — @media 991px 이하에서 block으로 전환 */
@media (min-width: 992px) {
	.product-list-list-mobilebar {
		display: none !important;
	}
}