/**
 * V1.0
 *
 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body {
	font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans TC',sans-serif;
	line-height: 1.6;
	color: #333;
	background: #f5f5f5;
	min-height: 100vh;
	margin-top: 60px;
	padding-bottom: 70px;
}

@media (max-width: 1024px) {
	body {
		padding-top:10px;
		padding-bottom: 55px
	}
}

@media (max-width: 768px) {
	body {
		padding-top:10px;
		padding-bottom: 55px
	}
}

@media (max-width: 480px) {
	body {
		padding-top:10px;
		padding-bottom: 55px
	}
}

.product-detail-wrapper {
	max-width: 1024px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	padding: 0;
	min-height: 100vh;
}

.main-content {
	padding: 0;
	padding-top: 5px;
	padding-bottom: 5px;
}

.product-main-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin: 10px;
	padding: 10px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08)
}

.product-image-section {
	display: flex;
	flex-direction: column;
	gap: 0
}

.main-image-container {

	position: relative;
	aspect-ratio: 3/4;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	transition: all 0.3s ease;
	margin-bottom: 20px
}

.main-image-container:hover {
	transform: scale(1.02);
	box-shadow: 0 12px 40px rgba(0,0,0,0.2)
}

.main-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s ease;

}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	color: white;
	font-size: 14px
}

.main-image-container:hover .image-overlay {
	opacity: 1
}

.image-overlay i {
	font-size: 32px;
	margin-bottom: 8px
}

.thumbnail-list {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 12px
}

.thumbnail-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1)
}

.thumbnail-item:hover {
	border-color: #3498db;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(52,152,219,0.3)
}

.thumbnail-item.active {
	border-color: #e74c3c;
	box-shadow: 0 4px 15px rgba(231,76,60,0.3)
}

.thumbnail-item img,.thumbnail-item video {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.video-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: white;
	font-size: 20px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.7);
	pointer-events: none
}

.product-info-section {
	display: flex;
	flex-direction: column;
	gap: 10px
}

/* 產品標題區域重新佈局 */
.product-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 10px;
	padding-bottom: 0px;
}

.title-rating-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	gap: 20px;

}

.title-section {
	flex: 1;
	min-width: 0;
	text-align: left;
	margin-top: 10px;
}

.product-name {
	font-size: 28px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0;
	letter-spacing: 0.5px;
	text-align: left;
}

.number-rating-section {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	margin-top: 10px;
}

.product-id {
	font-size: 14px;
	color: #7f8c8d;
	background: #ecf0f1;
	padding: 4px 12px;
	border-radius: 15px;
	display: block;
	text-align: right;
	white-space: nowrap
}

.action-buttons {
	display: flex;
	gap: 10px;
	justify-content: flex-start;
	margin-top: 10px;
	margin-bottom: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	width: 100%;
	max-width: 100%
}

.action-buttons::-webkit-scrollbar {
	display: none
}

.btn-back {
	padding: 10px 22px;
	border: 2px solid #999;
	border-radius: 20px;
	font-size: 24px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 1px;
	background: white;
	color: #999;
	flex-shrink: 0;
	white-space: nowrap;
	width: auto
}

.btn-back:hover {
	background: #999;
	color: white;
	transform: translateY(1px);
	box-shadow: 0 4px 15px rgba(231,76,60,0.3)
}


.btn-favorite {
	padding: 10px 8px;
	border: 2px solid #e74c3c;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 1px;
	background: white;
	color: #e74c3c;
	flex-shrink: 0;
	white-space: nowrap;
	width: auto
}

.btn-favorite:hover {
	background: #e74c3c;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(231,76,60,0.3)
}

.btn-like {
	padding: 10px 8px;
	border: 2px solid #f39c12;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 1px;
	background: white;
	color: #f39c12;
	flex-shrink: 0;
	white-space: nowrap;
	width: auto
}

.btn-like:hover {
	background: #f39c12;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(243,156,18,0.3)
}

.btn-share {
	padding: 10px 8px;
	border: 2px solid #3498db;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 1px;
	background: white;
	color: #3498db;
	flex-shrink: 0;
	white-space: nowrap;
	width: auto
}

.btn-share:hover {
	background: #3498db;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(52,152,219,0.3)
}

.btn-booking {
	padding: 10px 8px;
	border: 2px solid #27ae60;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 1px;
	background: white;
	color: #27ae60;
	flex-shrink: 0;
	white-space: nowrap;
	width: auto
}

.btn-booking:hover {
	background: #27ae60;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(39,174,96,0.3)
}

.basic-info {
	background: #fff;
	padding: 20px;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin: 10px 0;
	border-left: 4px solid #3498db
}

.info-grid {
	font-size: 24px;
	display: grid;
	/*grid-template-columns: repeat(2,1fr);
	gap: 16px*/
}

.info-item {
	/*display: flex;*/
	/*justify-content: space-between;*/
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef
}

.info-item:last-child {
	border-bottom: none
}

.info-item .label {
	color: #000;
	font-weight: 600
}

.info-item .value {
	color: #999;
	font-weight: 600
}

.price-section {
	background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
	padding: 20px;
	border-radius: 12px;
	color: white
}

.price-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding: 8px 0
}

.price-item:last-child {
	margin-bottom: 0
}

.price-item .label {
	font-size: 16px;
	font-weight: 600
}

.price-item .price {
	font-size: 20px;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0,0,0,0.2)
}

.price-item .duration {
	font-size: 12px;
	opacity: 0.8;
	margin-left: 8px
}

.btn-booking:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(231,76,60,0.3)
}

.tag-category {
	padding: 10px;
	background: #fff;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px
}

.tag-category-name {
	font-weight:bold;
	font-size: 1rem;
	color: #000;
}
.tag-items {
	font-size: 1rem;
	color: #888;
}
.detail-content-section {
	background: #fff;
	margin: 10px;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 10px
}

.detail-content {
	background: #f8f9fa;
	padding: 10px;
	border-radius: 12px;
	border-left: 4px solid #3498db
}

.content-text {
	line-height: 1.8;
	color: #2c3e50;
	font-size: 15px
}

.detailed-rating-section {
	background: #fff;
	margin: 10px;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 10px
}

.section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	color: #2c3e50
}

.title-icon {
	font-size: 24px
}

.detailed-rating {
	margin-bottom: 10px;
	padding: 20px;
	background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);
	border-radius: 12px;
	border: 1px solid #dee2e6
}

.rating-item {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	gap: 16px
}

.rating-item:last-child {
	margin-bottom: 0
}

.rating-item .label {
	min-width: 60px;
	font-size: 14px;
	font-weight: 600;
	color: #495057
}

.rating-bar {
	flex: 1;
	height: 10px;
	background: #e9ecef;
	border-radius: 5px;
	overflow: hidden;
	position: relative
}

.rating-fill {
	height: 100%;
	background: linear-gradient(90deg,#ff6b6b 0%,#ee5a24 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	position: relative
}

.rating-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%);
	animation: shimmer 2s infinite
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%)
	}

	100% {
		transform: translateX(100%)
	}
}

.rating-item .score {
	min-width: 40px;
	text-align: right;
	font-weight: 700;
	color: #e74c3c;
	font-size: 16px
}

.rating-submit-section {
	padding: 20px;
	background: #fff;
	border: 2px dashed #dee2e6;
	border-radius: 12px;
	text-align: center
}

.rating-submit-section h4 {
	font-size: 18px;
	color: #2c3e50;
	margin-bottom: 16px
}

.user-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 12px
}

.rating-stars {
	display: flex;
	gap: 8px
}

.rating-stars .star {
	font-size: 24px;
	cursor: pointer;
	transition: all 0.3s ease
}

.rating-stars .star:hover {
	transform: scale(1.3)
}

.btn-submit-rating {
	padding: 10px 24px;
	background: #3498db;
	color: white;
	border: none;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease
}

.btn-submit-rating:hover {
	background: #2980b9;
	transform: translateY(-2px)
}

.login-tip {
	font-size: 12px;
	color: #7f8c8d;
	margin: 0
}

.comments-section {
	background: #fff;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin: 10px;
	margin-bottom: 10px
}

.comment-form-section {
	margin-bottom: 10px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 12px
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: 15px
}

.form-group textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 14px;
	resize: vertical;
	transition: border-color 0.3s ease
}

.form-group textarea:focus {
	outline: none;
	border-color: #3498db
}

.form-actions {
	/*display: flex;*/
	justify-content: space-between;
	align-items: center
}

.btn-submit-comment {
	padding: 10px 24px;
	background: #28a745;
	color: white;
	border: none;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease
}

.btn-submit-comment:hover {
	background: #218838;
	transform: translateY(-2px)
}

.comments-list {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.comment-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 12px;
	border: 1px solid #3498db
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px
}

.user-info {
	display: flex;
	align-items: center;
	gap: 12px
}

.user-avatar {
	width: 40px;
	height: 40px;
	background: #3498db;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px
}

.user-details {
	display: flex;
	flex-direction: column
}

.username {
	font-weight: 600;
	color: #2c3e50
}

.comment-date {
	font-size: 12px;
	color: #7f8c8d
}

.comment-rating {
	display: flex;
	align-items: center;
	gap: 8px
}

.comment-rating .stars {
	display: flex;
	gap: 2px
}

.comment-rating .star {
	font-size: 16px
}

.comment-rating .rating-score {
	font-weight: 600;
	color: #e74c3c
}

.comment-content {
	margin-bottom: 5px;
	line-height: 1.6;
	/*color: #2c3e50*/
}

.comment-actions {
	display: flex;
	align-items: center;
	gap: 15px
}

.btn-reply {
	background: none;
	border: none;
	color: #3498db;
	font-size: 14px;
	cursor: pointer;
	transition: color 0.3s ease
}

.btn-reply:hover {
	color: #2980b9
}

.comment-likes {
	font-size: 14px;
	color: #7f8c8d
}

.reply-form {
	margin-top: 15px;
	padding: 15px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e9ecef
}

.reply-form textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	font-size: 13px;
	resize: vertical
}

.reply-actions {
	margin-top: 10px;
	display: flex;
	gap: 10px;
	align-items: center
}

.reply-actions button {
	padding: 6px 12px;
	border: none;
	border-radius: 15px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease
}

.reply-actions button:first-child {
	background: #28a745;
	color: white
}

.reply-actions button:first-child:hover {
	background: #218838
}

.reply-actions button:last-child {
	background: #6c757d;
	color: white
}

.reply-actions button:last-child:hover {
	background: #5a6268
}

.replies-list {
	margin-top: 15px;
	margin-bottom: 10px;
	padding-left: 10px;
	margin-bottom: 10px;
	/*border-radius: 12px;*/
	/*border-left: 1px solid #e9ecef;*/
}

.reply-item {
	padding: 10px;
	/*border: 1px solid #000;*/
	margin-bottom: 10px;
	background-color: #e9ecef;
}

.reply-item:last-child {
	/*border-bottom: none*/
}

.reply-header {
	display: flex;
	gap: 10px;
	margin-bottom: 5px
}

.reply-header .username {
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50
}

.reply-header .reply-date {
	font-size: 11px;
	color: #7f8c8d
}

.reply-content {
	font-size: 13px;
	line-height: 1.5;
	color: #495057
}

.page  {
	text-align: center;
}

.btn-submit-reply {
	padding: 6px 12px;
	color: #FFF;
	border: none;
	border-radius: 15px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #3498db;
}

.btn-cancel-reply {
	padding: 6px 12px;
	border: none;
	border-radius: 15px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease
}



.load-more-section {
	text-align: center;
	margin-top: 20px
}

.btn-load-more {
	padding: 10px 30px;
	background: #6c757d;
	color: white;
	border: none;
	border-radius: 20px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease
}

.btn-load-more:hover {
	background: #5a6268;
	transform: translateY(-2px)
}

.gallery-section {
	background: #fff;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin: 10px;
	margin-bottom: 10px
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
	gap: 16px
}

.gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1)
}

.gallery-item:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 25px rgba(0,0,0,0.2)
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s ease
}

.gallery-item video {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.gallery-item:hover img {
	transform: scale(1.1)
}

.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease
}

.gallery-item:hover .gallery-overlay {
	opacity: 1
}

.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	display: none;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lightbox.active {
	display: flex
}

.lightbox-content {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.media-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.media-display {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-display img,.media-display video {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}

.close-btn {
	position: absolute;
	top: -10px;
	right: 10px;
	background: none;
	border: none;
	color: white;
	font-size: 100px;
	cursor: pointer;
	z-index: 10001
}

.nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.2);
	border: none;
	color: white;
	padding: 20px;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease;
	z-index: 10000
}

.nav-btn >i {
	font-size: 40px;
}

.nav-btn:hover {
	background: rgba(255,255,255,0.4)
}

.prev-btn {
	left: 20px
}

.next-btn {
	right: 20px
}


@media (max-width: 480px) {
	.nav-btn {
		width: 45px;
		height: 45px;
		font-size: 18px
	}

	.prev-btn {
		left: 10px
	}

	.next-btn {
		right: 10px
	}
}

@media (max-width: 480px) {
	.media-display img,.media-display video {
		max-width: 95vw;
		max-height: 85vh;
	}

	.lightbox {
		padding: 10px;
	}
}

@media (max-width: 1024px) {
	.product-detail-wrapper {
		margin:0 10px;
		box-shadow: none
	}
	.info-grid {
		font-size: 24px;
		grid-template-columns: 1fr;
		gap: 12px
	}
}

@media (max-width: 768px) {

	.title-rating-wrapper {
		max-width: 99vw;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20px;
		gap: 15px;
	}


	.number-rating-section {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
		flex-shrink: 0;
		margin-left: 0;
		margin-top: 10px;
	}


	.title-section {
		flex: 1;
		max-width: 99vw;
		text-align: right;
		margin-top: 10px;
	}

	.product-main-section {
		grid-template-columns:1fr;
		gap: 20px;
		padding: 20px;
		margin-top: 10px
	}

	.main-content {
		padding: 0
	}

	.product-image-section {
		max-width:325px;
		order: 1
	}

	.lightbox {
		max-width: 99vw;
		width: 100%;
		max-height: 90vh;
		padding: 10px;
		box-sizing: border-box;
	}

	.comments-section {
		background: #fff;
		padding: 10px;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		margin: 10px;
		margin-bottom: 10px
	}

	.detailed-rating-section {
		background: #fff;
		margin: 10px;
		padding: 10px;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		margin-bottom: 10px
	}


	.product-info-section {
		max-width: 99vw;
		order: 2
	}

	.main-image-container {
		aspect-ratio: 4/3;
		max-height: 300px
	}

	.product-name {
		font-size: 22px
	}

	.score-number {
		font-size: 28px
	}

	.rating-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px
	}

	.action-buttons {
		width: 100%;
		justify-content: space-between
	}

	.btn-favorite,.btn-share {
		flex: 1;
		justify-content: center
	}

	.info-grid {
		font-size: 1rem;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 16px
	}

	.info-item {
		/*display: flex;*/
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #e9ecef
	}

	.gallery-section {
		padding: 20px;
		margin-bottom: 20px
	}

	.gallery-grid {
		grid-template-columns: repeat(3,1fr);
		gap: 12px
	}

	.nav-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		padding: 12px;
		font-size: 20px;
		background: rgba(0,0,0,0.7);
		border-radius: 50%;
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		color: white;
		cursor: pointer;
		z-index: 10000;
	}

	.prev-btn {
		left: 15px
	}

	.next-btn {
		right: 15px
	}

	.close-btn {
		position: absolute;
		top: 15px;
		right: 15px;
		background: rgba(0,0,0,0.7);
		border: none;
		color: white;
		font-size: 48px;
		cursor: pointer;
		z-index: 10001;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center
	}
}

@media (max-width: 480px) {
	.product-detail-wrapper {
		margin:0;
		border-radius: 0
	}

	.product-main-section {
		padding: 15px;
		border-radius: 0;
		margin-bottom: 15px;
		margin-top: 10px
	}

	.main-image-container {
		aspect-ratio: 3/4;
		max-height: 485px
	}

	.product-name {
		font-size: 20px
	}

	.score-number {
		font-size: 24px
	}

	.basic-info {
		padding: 15px
	}

	.price-section {
		padding: 15px
	}

	.gallery-section {
		padding: 15px;
		border-radius: 0;
		margin-bottom: 15px
	}

	.gallery-grid {
		grid-template-columns: repeat(2,1fr);
		gap: 10px
	}

	.section-title {
		font-size: 18px
	}

	.btn-booking {
		padding: 14px;
		font-size: 16px
	}

	.nav-btn {
		width: 45px;
		height: 45px;
		font-size: 18px
	}

	.prev-btn {
		left: 10px
	}

	.next-btn {
		right: 10px
	}

	.media-display {
		max-width: 95vw;
		max-height: 70vh
	}

	.lightbox-info {
		margin-top: 15px;
		font-size: 14px
	}
}