.image-row-fixed {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	line-height: 0;
	/* ← 這行超重要，用來去除 inline 之間的空隙 */
}

.image-row-fixed img {
	width: 50%;
	margin: 0;
	padding: 0;
	display: block;
	/* 移除圖片之間的空格 */
	border: none;
	/* 保險起見 */
}




.product-badges {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 6px;
	z-index: 10;
}

.badge-icon {
	width: 48px;
	height: auto;
}


.ex-price {
	font-size: 18px;
	font-weight: bold;
	color: #df181e;
}


/* 預設桌面版 */
.tab-content .tab-pane .tab-image {
	width: 45% !important;
	max-width: 100% !important;
	/* 最大寬度設定為100% */
	height: auto !important;
	/* 保持圖片比例 */
	display: block !important;
	margin: 0 auto !important;
	/* 讓圖片居中 */
}

/* 手機版 */
@media (max-width: 768px) {
	.tab-content .tab-pane .tab-image {
		width: 100% !important;
		/* 讓圖片寬度自適應手機屏幕 */
		max-width: 100% !important;
		/* 讓圖片最大寬度自適應屏幕 */
		height: auto !important;
		/* 保持圖片比例 */
	}
}


/* 調整整個tab導航列的對齊與間距 */
ul#myTab {
	padding-top: 60px;
	display: flex;
	justify-content: center;
}

/* 針對每個tab項目的樣式 */
ul#myTab .nav-item .nav-link {
	padding: 15px 140px;
	font-size: 18x;
	font-weight: bold;
	color: #333;
	/* 預設文字顏色 */
	border: 1px solid #ccc;
	/* 預設為透明邊框，避免被擠壓 */
	border-top-left-radius: 10px;
	border-top-Right-radius: 10px;
	transition: all 0.3s ease;
	margin-right: 15px;
	/* 設定每個tab項目之間的空間 */
}

/* 預設選中Tab的樣式 */
ul#myTab .nav-item .nav-link.active {
	color: #fff;
	border-top-left-radius: 10px;
	border-top-Right-radius: 10px;
	background-color: #000000;
	/* 選中的Tab背景顏色 */
	border-color: #000000;
	/* 選中的Tab邊框顏色 */
}

/* Tab的hover效果 */
ul#myTab .nav-item .nav-link:hover {
	background-color: #333;
	/* hover時背景顏色 */
	border-color: #333;
	/* hover時邊框顏色 */
	color: #fff
}

/* 內容區域過渡效果 */
.tab-content .tab-pane {
	padding: 0px;
	background-color: #f9f9f9;
	/* 內容區域背景顏色 */
	border-top-left-radius: 10px;
	border-top-Right-radius: 10px;
	transition: opacity 0.3s ease;
}

/* 當tab切換時，隱藏非活動區塊 */
.tab-pane.fade {
	display: none;
	opacity: 0;
}

.tab-pane.show.active {
	display: block;
	opacity: 1;
	text-align: center;

}

/* 手機版調整 */
@media (max-width: 768px) {

	/* 確保Tab在手機版時也能在同一行顯示 */
	ul#myTab {
		flex-wrap: nowrap;
		/* 禁止換行，保持Tab項目在同一行 */
	}

	/* 確保每個Tab項目不會被擠壓 */
	ul#myTab .nav-item .nav-link {
		padding: 10px 20px;
		/* 在手機版上減少內邊距 */
		font-size: 14px;
		/* 在手機版上調整字型大小 */
		margin-right: 10px;
		/* Tab項目之間的間距 */
		flex: 1 !important;
		/* 每個Tab項目佔據相等的寬度 */
		text-align: center;
		/* 文字置中對齊 */
	}

	/* 移除最後一個Tab的右邊距離 */
	ul#myTab .nav-item:last-child .nav-link {
		margin-right: 0;
	}
}


.product-gallery {
	text-align: center;
}

.main-image img {
	width: 400px;
	height: auto;
}

.thumbnail-images {
	justify-content: center;
}

.thumbnail {
	width: 80px;
	height: 80px;
	margin: 5px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.thumbnail:hover {
	transform: scale(1.1);
}

/* 讓預覽圖在手機版時自動換行 */
.thumbnail-images {
	justify-content: flex-start;
	gap: 10px;
}

.thumbnail {
	width: 80px;
	height: 80px;
	cursor: pointer;
	transition: transform 0.3s ease;
	border: 1px solid;
}

.thumbnail:hover {
	transform: scale(1.1);
}

.product-gallery {
	text-align: center;
}


@media (max-width: 768px) {
	.product-gallery {
		text-align: center;
	}

	.col-md-6 {
		margin-bottom: 20px;
		/* 給左右區塊之間添加間距 */
	}

	.main-image img {
		width: 100%;
		max-width: 400px;
		height: auto;
	}
}

.thumbnail-images {
	justify-content: left;
	gap: 0px;
	overflow-x: auto;
}



.nav {

	--bs-nav-link-color: #000 !important;

}

.no-click {
	text-decoration: none;
	/* 禁用鏈接樣式 */
	pointer-events: none;
	/* 禁止點擊事件 */
}

.tab-pane img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}

/* 讓文字自動換行，避免超出畫面 */
.tab-content .tab-pane p {
	font-size: 18px;
	/* 預設字型大小 */
	word-wrap: break-word;
	/* 讓長字自動換行 */
	overflow-wrap: break-word;
	/* 讓長字自動換行 */
	margin: 10px 0;
	/* 讓文字區塊有上下間距 */
}

/* 手機版調整 */
@media (max-width: 768px) {

	/* 調整文字大小以適應手機螢幕 */
	.tab-content .tab-pane p {
		font-size: 16px;
		/* 調整手機版文字的大小 */
	}

	/* 圖片在手機版下自動調整為滿版 */
	.tab-content .tab-pane img {
		max-width: 100%;
		/* 讓圖片寬度填滿父元素 */
		height: auto;
		/* 保持圖片比例 */
	}
}


/* 確保愛心圖標樣式一致 */
.fas.fa-heart {
	font-size: 1.2rem;
	/* 調整大小，根據需要調整 */
	color: #000;
	/* 設定顏色，這裡是黑色，可以根據需求修改 */
}

/* 如果需要更多控制按鈕顏色的話，可以加入以下 */
.btn-outline-danger {
	border-color: #dc3545;
	/* 設定邊框顏色 */
	color: #dc3545;
	/* 設定文字顏色 */
}

.btn-outline-danger:hover {
	background-color: #dc3545;
	/* hover時背景顏色 */
	color: white;
	/* hover時文字顏色 */
}