/**
 * Homepage Styles - Banner Only
 * 
 * @package vapesmalluk
 * @since 1.0
 */

:root {
	--primary-orange: #FFAA01;
	--secondary-black: #333333;
	--yellow-banner: #f4bc2f;
	--light-bg: #F5F5F5;
}

/* Banner Swiper Styles */
.primary-banner {
	position: relative;
	overflow: hidden;
}

.banner-swiper {
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.banner-swiper .swiper-slide {
	overflow: hidden;
}

/* 非 hero／活動的 slide 默认渐变；活動與 hero 背景由内联提供 */
.banner-swiper .swiper-slide:not(.banner-hero-slide):not(.banner-activity-slide) {
	background: linear-gradient(90deg, #2AB5B3 0%, #E8E66B 50%, #FF9A9E 100%);
}

/* hero slide：無自訂圖時由 PHP 內聯提供淺色底 */
.primary-banner.banner-single-slide .banner-hero-slide {
	min-height: 100%;
	height: 100%;
	background: #ffffff;
}

/* Primary Banner Content */
.primary-banner-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	padding: 80px 30px;
	min-height: 600px;
	max-width: 1460px;
	margin: 0 auto;
}

/* Banner Hero 第一页样式 - 大屏左靠，距左侧按钮 150px */
.banner-hero-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	gap: 30px;
	width: 100%;
	max-width: 800px;
	/* 左按钮 48px + 按钮宽 50px + 间距 150px = 248px */
	margin-left: 248px;
	margin-right: auto;
}

.banner-hero-title {
	font-size: 60px;
	font-weight: 900;
	line-height: 1.2;
	margin: 0;
	font-family: 'AvenirLTStd-Black', sans-serif;
	opacity: 1;
	transform: translateY(0);
	transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-slide-active .banner-hero-title {
	opacity: 1;
	transform: translateY(0);
}

.banner-hero-title-accent {
	color: #FFAA01;
}

.banner-hero-title-white {
	color: #ffffff;
}

/* 無背景圖／影片時淺色底，主標與副標改深色 */
.banner-hero-slide--light-bg .banner-hero-title-white {
	color: #333333;
}

.banner-hero-slide--light-bg .banner-hero-desc {
	color: #333333;
}

.banner-hero-desc {
	font-size: 24px;
	line-height: 1.6;
	color: #ffffff;
	margin: 0;
	opacity: 1;
	transform: translateY(0);
	transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.1s;
}

.swiper-slide-active .banner-hero-desc {
	opacity: 1;
	transform: translateY(0);
}

/* Banner 搜索框 - 按钮在输入框内右侧 */
.banner-hero-search {
	width: 100%;
	max-width: 622px;
	margin: 0;
	box-sizing: border-box;
	opacity: 1;
	transform: translateY(0);
	transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.2s;
}

.swiper-slide-active .banner-hero-search {
	opacity: 1;
	transform: translateY(0);
}

/* 仅在 Swiper 初始化成功后启用入场动画 */
.banner-swiper.swiper-initialized .banner-hero-title,
.banner-swiper.swiper-initialized .banner-hero-desc,
.banner-swiper.swiper-initialized .banner-hero-search {
	opacity: 0;
	transform: translateY(20px);
}

.banner-swiper.swiper-initialized .swiper-slide-active .banner-hero-title,
.banner-swiper.swiper-initialized .swiper-slide-active .banner-hero-desc,
.banner-swiper.swiper-initialized .swiper-slide-active .banner-hero-search {
	opacity: 1;
	transform: translateY(0);
}

/* 单页 Banner：内容始终可见（不依赖 swiper-slide-active） */
.primary-banner.banner-single-slide .banner-hero-title,
.primary-banner.banner-single-slide .banner-hero-desc,
.primary-banner.banner-single-slide .banner-hero-search {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* 搜索框：白底圆角容器，按钮绝对定位在右侧内部 */
.banner-search-inner {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); */
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	z-index: 2;
}

/* 搜尋建議下拉框 */
.banner-hero-search {
	position: relative;
	z-index: 1000; /* 提升搜尋表單整體層級 */
}

.banner-search-suggestions {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	width: 100%;
	background: #fcfcfc;
	border-radius: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	padding: 12px;
	box-sizing: border-box;
	z-index: 9999; /* 確保在最最上層 */
	display: none; /* 預設隱藏，點擊輸入框顯示 */
	max-height: 400px; /* 限制最大高度 */
	overflow-y: auto; /* 超出時顯示捲動條 */
}

.banner-search-suggestions::-webkit-scrollbar {
	width: 6px;
}

.banner-search-suggestions::-webkit-scrollbar-track {
	background: transparent;
}

.banner-search-suggestions::-webkit-scrollbar-thumb {
	background: #e5e7eb;
	border-radius: 10px;
}

.banner-search-suggestions::-webkit-scrollbar-thumb:hover {
	background: #d1d5db;
}

.banner-search-input:focus ~ .banner-search-suggestions,
.banner-search-input:active ~ .banner-search-suggestions,
.banner-hero-search:focus-within .banner-search-suggestions {
	display: block;
}

.suggestion-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	gap: 16px;
}

.suggestion-item:hover {
	background: #f0f2f5; /* 懸浮時顏色加深 */
}

.suggestion-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.suggestion-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.suggestion-info {
	flex: 1;
	text-align: left;
}

.suggestion-name {
	font-size: 16px;
	font-weight: 600;
	color: #1A1A1A;
	margin-bottom: 2px;
}

.suggestion-price {
	font-size: 13px;
	color: #666;
}

.suggestion-type {
	font-size: 13px;
	color: #999;
	flex-shrink: 0;
}

/* ========================================
   Banner 搜索下拉框（帶歷史記錄）
   ======================================== */
.banner-search-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	width: 100%;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	padding: 0;
	box-sizing: border-box;
	z-index: 9999;
	display: none;
	max-height: 420px;
	overflow-y: auto;
}

.banner-search-dropdown.active {
	display: block;
}

.banner-search-dropdown::-webkit-scrollbar {
	width: 6px;
}

.banner-search-dropdown::-webkit-scrollbar-track {
	background: transparent;
}

.banner-search-dropdown::-webkit-scrollbar-thumb {
	background: #e5e7eb;
	border-radius: 10px;
}

/* 搜索歷史區域 */
.banner-search-history,
.banner-click-history {
	padding: 16px 16px 8px;
	border-bottom: 1px solid #f3f4f6;
}

.banner-search-history-header,
.banner-click-history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.banner-search-history-title,
.banner-click-history-title {
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
}

.banner-search-history-clear,
.banner-click-history-clear {
	font-size: 12px;
	color: #9ca3af;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.banner-search-history-clear:hover,
.banner-click-history-clear:hover {
	color: #ef4444;
}

.banner-history-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
	font-size: 14px;
	color: #374151;
}

.banner-history-item:hover {
	background-color: #f3f4f6;
}

.banner-history-icon {
	color: #9ca3af;
	flex-shrink: 0;
}

/* 搜索結果區域 */
.banner-search-results {
	padding: 8px;
}

.banner-search-results-list {
	display: flex;
	flex-direction: column;
}

.banner-result-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.banner-result-item:hover {
	background-color: #f3f4f6;
}

.banner-result-image {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.banner-result-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-result-info {
	flex: 1;
	min-width: 0;
}

.banner-result-title {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.banner-result-price {
	font-size: 13px;
	color: #6b7280;
	margin-top: 2px;
}

.banner-result-meta {
	flex-shrink: 0;
}

.banner-result-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	color: #f97316;
	background-color: #fff7ed;
	border-radius: 4px;
}

.banner-search-loading,
.banner-search-no-results {
	text-align: center;
	padding: 24px 16px;
	color: #9ca3af;
	font-size: 14px;
}

/* 點擊記錄列表 */
.banner-click-history-list {
	display: flex;
	flex-direction: column;
}

.banner-click-history-list .banner-result-item {
	padding: 10px 12px;
}

.banner-click-history-list .banner-result-image {
	width: 36px;
	height: 36px;
}

.banner-click-history-list .banner-result-title {
	font-size: 14px;
}

.banner-click-history-list .banner-result-price {
	font-size: 12px;
}

@media (max-width: 768px) {
	.banner-search-dropdown {
		border-radius: 12px;
		max-height: 350px;
	}
	
	.banner-search-history,
	.banner-click-history {
		padding: 12px 12px 6px;
	}
	
	.banner-result-item {
		padding: 10px;
		gap: 12px;
	}
	
	.banner-result-image {
		width: 38px;
		height: 38px;
	}
	
	.banner-result-title {
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.banner-search-suggestions {
		border-radius: 16px;
		padding: 8px;
	}
	.suggestion-item {
		padding: 10px;
		gap: 12px;
	}
	.suggestion-icon {
		width: 32px;
		height: 32px;
	}
	.suggestion-name {
		font-size: 14px;
	}
	.suggestion-price, .suggestion-type {
		font-size: 12px;
	}
}

.banner-search-input-wrap {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 8px 24px 8px 24px;
	gap: 12px;
	/* 右侧留出按钮空间，避免输入文字被按钮遮挡 */
	padding-right: 95px;
}

.banner-search-icon {
	color: #999;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.banner-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	padding: 16px 0;
	font-size: 16px;
	color: #333;
	background: transparent;
}

.banner-search-input::placeholder {
	color: #999;
}

/* 按钮嵌入在输入框内右侧，覆盖在白色区域内 */
.banner-search-btn {
	position: absolute;
	right: 16px;
	top: 6px;
	bottom: 6px;
	z-index: 1;
	background: #01488c;
	color: #ffffff;
	border: none;
	padding: 0 25px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.3s;
	font-family: inherit;
	border-radius: 20px;
}

.banner-search-btn:hover {
	background: #012d59;
}

.primary-banner-left {
	flex: 1;
	color: white;
	z-index: 2;
}

.primary-banner-tag {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	display: block;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-slide-active .primary-banner-tag {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

.primary-banner-left h1 {
	font-size: 52px;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 20px;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(30px);
	color: white;
	font-family: 'AvenirLTStd-Black';
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-slide-active .primary-banner-left h1 {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

.primary-banner-price {
	font-size: 20px;
	margin-bottom: 5px;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-slide-active .primary-banner-price {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.6s;
}

.primary-banner-bigprice {
	font-size: 48px;
	font-weight: 900;
	margin-bottom: 25px;
	color: #FFEB3B;
	opacity: 0;
	transform: translateY(30px) scale(0.9);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-slide-active .primary-banner-bigprice {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition-delay: 0.8s;
}

.primary-banner-btn {
	background: white;
	color: var(--secondary-black);
	padding: 12px 35px;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	transition: all 0.3s;
	opacity: 0;
	transform: translateY(30px);
}

.swiper-slide-active .primary-banner-btn {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-banner-btn:hover {
	background: var(--secondary-black);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.primary-banner-right {
	z-index: 1;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
}

.primary-banner-right img {
	max-height: 100%;
	width: auto;
	opacity: 0;
	transform: translateX(50px) scale(0.95) rotate(2deg);
	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
	filter: brightness(0.95);
}

.swiper-slide-active .primary-banner-right img {
	opacity: 1;
	transform: translateX(0) scale(1) rotate(0deg);
	transition-delay: 0.3s;
	filter: brightness(1);
}

/* Slide 2+：僅全幅圖片或影片（簡化版） */
.banner-simple-slide .banner-simple-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* min-height: 600px; */
	height: 100%;
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* 整張 Banner 可點連結（蓋在媒體上；主標題區內容層需更高 z-index） */
.banner-activity-slide,
.banner-hero-slide {
	position: relative;
}
.banner-activity-slide .banner-slide-bg-img,
.banner-hero-slide .banner-slide-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
	pointer-events: none;
}
.banner-slide-overlay-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.banner-hero-slide .banner-slide-overlay-link {
	z-index: 1;
}

/* 影片類型：內層全寬，避免 iframe 兩側留白 */
.banner-simple-slide .banner-simple-inner.is-banner-media-video {
	max-width: none;
	padding: 0;
	margin: 0;
}

.banner-simple-media {
	width: 100%;
	height: 100%;
	/* min-height: 520px; */
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-simple-img {
	width: 100%;
	height: 100%;
	max-height: 600px;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* 僅「純圖片」模式下的 video 不會用到；檔案影片在下方 contain */

.banner-simple-img-link {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 600px;
	line-height: 0;
}

.banner-simple-img-link .banner-simple-img {
	cursor: pointer;
}

/* 影片模式：底層背景圖 + 上層維持 YouTube 常規 16:9（不裁切上下） */
.banner-simple-video-stage {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 600px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
}

.banner-simple-embed-contain {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 16px;
}

/* 常規嵌入尺寸：寬不超過 600×16/9，高不超過 600，完整顯示不裁切 */
.banner-simple-embed-contain iframe.banner-simple-iframe {
	position: relative !important;
	border: 0 !important;
	width: min(100%, calc(600px * 16 / 9)) !important;
	max-width: 100% !important;
	max-height: 600px !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

.banner-simple-video-contain {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 16px;
}

.banner-simple-video-contain .banner-simple-video-el {
	width: auto !important;
	max-width: min(100%, calc(600px * 16 / 9)) !important;
	max-height: 600px !important;
	height: auto !important;
	object-fit: contain;
	object-position: center center;
	display: block;
}

/* Swiper Custom Navigation - 按钮向中间靠拢 20px */
.banner-swiper .swiper-button-prev {
	left: 48px;
	right: auto;
}
.banner-swiper .swiper-button-next {
	left: auto;
	right: 48px;
}
.banner-swiper .swiper-button-prev,
.banner-swiper .swiper-button-next {
	position: absolute;
	top: 50%;
	margin-top: -25px;
	color: white;
	width: 50px;
	height: 50px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	visibility: hidden !important; /* 預設隱藏 */
	opacity: 0 !important; /* 預設透明 */
	z-index: 60 !important;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease; /* 平滑過渡 */
}

/* 鼠標懸浮到 banner 時顯示按鈕 */
.primary-banner:hover .banner-swiper .swiper-button-prev,
.primary-banner:hover .banner-swiper .swiper-button-next {
	visibility: visible !important;
	opacity: 1 !important;
}

.banner-swiper .swiper-button-prev:hover,
.banner-swiper .swiper-button-next:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.banner-swiper .swiper-button-prev::after,
.banner-swiper .swiper-button-next::after {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
}

/* 不依赖 swiper 默认字体图标，直接渲染箭头字符 */
.banner-swiper .swiper-button-prev::after {
	content: '‹';
}
.banner-swiper .swiper-button-next::after {
	content: '›';
}

/* Swiper Custom Pagination - 放在 primary-banner 内、banner-swiper 外，确保不被裁剪 */
.primary-banner .banner-swiper-pagination,
.primary-banner .banner-swiper-pagination.swiper-pagination-hidden {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 8px;
	position: absolute !important;
	bottom: 30px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	padding: 0;
	opacity: 0 !important; /* 預設透明 */
	visibility: hidden !important; /* 預設隱藏 */
	z-index: 50 !important;
	pointer-events: auto;
	min-height: 8px;
	transition: all 0.3s ease; /* 平滑過渡 */
}

/* 鼠標懸浮到 banner 時顯示分頁 */
.primary-banner:hover .banner-swiper-pagination {
	opacity: 1 !important;
	visibility: visible !important;
}

.primary-banner .banner-swiper-pagination .swiper-pagination-bullet {
	margin: 0;
}

.primary-banner .banner-swiper-pagination .swiper-pagination-bullet {
	width: 28px;
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.18);
	opacity: 1;
	transition: all 0.3s;
}

.primary-banner .banner-swiper-pagination .swiper-pagination-bullet-active {
	width: 28px;
	height: 4px;
	border-radius: 2px;
	background: #ffb202;
}

/* Performance optimizations */
.primary-banner-left > *,
.primary-banner-right img {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

/* Smooth rendering */
.banner-swiper {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/* primary-banner overrides - 大屏固定600px，小屏自适应 */
.primary-banner {
	padding: 0;
	width: 100%;
	margin: 0 0 40px 0;
	height: 600px;
	border-radius: 0;
	/* 與頁面淺色底一致（不再使用藍色漸層） */
	background: #ffffff;
	position: relative;
	z-index: 100; /* 提升 Banner 整体层级 */
	overflow: visible !important; /* 关键：防止内部下拉框被裁剪 */
}

.banner-swiper {
	width: 100%;
	height: 600px;
	overflow: visible !important; /* 关键：防止 Swiper 容器裁剪溢出的下拉框 */
}

.banner-swiper .swiper-wrapper {
	overflow: visible !important; /* 关键：防止 Wrapper 裁剪 */
}

.banner-swiper .swiper-slide {
	overflow: visible !important; /* 关键：防止 Slide 裁剪 */
}

.primary-banner-left {
	flex: 1;
	color: white;
}

.primary-banner-tag {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 10px;
	display: block;
	text-transform: capitalize;
	font-family: 'AvenirLTStd-Heavy';
}

.primary-banner-left h1 {
	font-size: 52px;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.primary-banner-price {
	font-size: 20px;
	margin-bottom: 5px;
}

.primary-banner-bigprice {
	font-size: 60px;
	font-weight: 900;
	margin-bottom: 10px;
	color: #FFCE00;
	font-family: 'AvenirLTStd-Black';
	line-height: 1;
}

/* ========================================
   Responsive Styles
======================================== */
/* 1920px 以下保持 600px */
@media (max-width: 1919px) {
	.primary-banner {
		width: 100%;
		height: 600px;
	}
	.banner-swiper {
		height: 600px;
	}
	.primary-banner-content {
		min-height: 600px;
	}
}

@media (max-width: 1680px) {
	.primary-banner {
		width: 100%;
		height: 600px;
	}
	.banner-swiper {
		height: 600px;
	}
	.primary-banner-content {
		min-height: 600px;
	}
}

@media (max-width: 1400px) {
	.primary-banner {
		width: 100%;
		height: 520px;
	}
	.banner-swiper {
		height: 520px;
	}

	.primary-banner-content {
		padding: 60px 30px;
		min-height: 520px;
		gap: 50px;
	}

	.primary-banner-left h1 {
		font-size: 46px;
	}

	.primary-banner-tag {
		font-size: 18px;
	}

	.primary-banner-price {
		font-size: 18px;
	}

	.primary-banner-bigprice {
		font-size: 54px;
		margin-bottom: 20px;
	}

	.primary-banner-btn {
		padding: 10px 30px;
	}
}

@media (max-width: 1200px) {
	.primary-banner {
		width: 100%;
		height: 460px;
	}
	.banner-swiper {
		height: 460px;
	}

	.primary-banner-content {
		padding: 50px 25px;
		min-height: 460px;
		gap: 40px;
	}

	.primary-banner-left h1 {
		font-size: 42px;
	}

	.primary-banner-tag {
		font-size: 17px;
	}

	.primary-banner-price {
		font-size: 17px;
	}

	.primary-banner-bigprice {
		font-size: 48px;
		margin-bottom: 18px;
	}

	.primary-banner-btn {
		padding: 10px 28px;
	}
}

@media (max-width: 992px) {
	.primary-banner {
		width: 100%;
		height: 420px;
		border-radius: 0;
	}
	.banner-swiper {
		height: 420px;
	}

	.primary-banner-content {
		padding: 40px 20px;
		min-height: 420px;
		gap: 30px;
	}

	.primary-banner-left h1 {
		font-size: 34px;
		margin-bottom: 16px;
	}

	.primary-banner-tag {
		font-size: 15px;
	}

	.primary-banner-price {
		font-size: 15px;
	}

	.primary-banner-bigprice {
		font-size: 42px;
		margin-bottom: 16px;
	}

	.primary-banner-btn {
		padding: 8px 24px;
	}

	.banner-swiper .swiper-button-prev,
	.banner-swiper .swiper-button-next {
		width: 42px;
		height: 42px;
	}

	/* Banner Hero 小屏适配 - 居中，gap 自适应 */
	.banner-hero-content {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		align-items: center;
		gap: 10px;
	}
	.banner-hero-search {
		max-width: 400px;
		min-width: 0;
	}
	.banner-hero-title {
		font-size: 40px;
	}
	.banner-hero-desc {
		font-size: 16px;
	}
	.banner-hero-search {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.dest-type-tabs {
		min-width: 0;
		width: calc(100% - 40px);
		max-width: 500px;
	}
}

@media (max-width: 768px) {
	.primary-banner {
		width: 100%;
		height: 380px;
		border-radius: 0;
		margin: 0 0 30px 0;
	}
	.banner-swiper {
		height: 380px;
	}

	.primary-banner-content {
		flex-direction: column;
		text-align: center;
		padding: 35px 20px;
		min-height: 380px;
		gap: 25px;
	}

	.primary-banner-left h1 {
		font-size: 30px;
		margin-bottom: 14px;
	}

	.primary-banner-tag {
		font-size: 14px;
		margin-bottom: 8px;
	}

	.primary-banner-price {
		font-size: 14px;
	}

	.primary-banner-bigprice {
		font-size: 38px;
		margin-bottom: 14px;
	}

	.primary-banner-btn {
		padding: 8px 22px;
	}

	.primary-banner-right {
		position: relative;
		margin-top: 10px;
	}

	.primary-banner-right img {
		max-height: 260px;
	}

	.banner-swiper .swiper-button-prev,
	.banner-swiper .swiper-button-next {
		width: 38px;
		height: 38px;
	}

	/* Banner Hero 小屏居中 */
	.banner-hero-content {
		padding: 20px 16px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		align-items: center;
		gap: 8px;
	}
	.banner-hero-title {
		font-size: 32px;
	}
	.banner-hero-desc {
		font-size: 15px;
	}
	.banner-hero-search {
		max-width: 360px;
		min-width: 0;
		width: 100%;
	}
	/* 768px 起：保持与大屏一致，按钮嵌入输入框右侧 */
	.banner-search-inner {
		width: 100%;
	}
	.banner-search-input-wrap {
		padding: 0 16px 0 20px;
		padding-right: 85px;
	}
	.banner-search-btn {
		right: 6px;
		top: 6px;
		bottom: 6px;
		padding: 0 18px;
		font-size: 14px;
	}
}

@media (max-width: 576px) {
	.primary-banner {
		height: 340px;
		border-radius: 0;
		margin-bottom: 25px;
	}
	.banner-swiper {
		height: 340px;
	}

	.primary-banner-content {
		padding: 28px 15px;
		min-height: 340px;
		gap: 20px;
	}

	.primary-banner-left h1 {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: 12px;
	}

	.primary-banner-tag {
		font-size: 13px;
		margin-bottom: 6px;
	}

	.primary-banner-price {
		font-size: 13px;
	}

	.primary-banner-bigprice {
		font-size: 32px;
		margin-bottom: 12px;
	}

	.primary-banner-btn {
		padding: 7px 20px;
		font-size: 11px;
	}

	.primary-banner-right img {
		max-height: 220px;
	}

	.banner-swiper .swiper-button-prev,
	.banner-swiper .swiper-button-next {
		width: 34px;
		height: 34px;
	}

	.banner-swiper .swiper-button-prev::after,
	.banner-swiper .swiper-button-next::after {
		font-size: 14px;
	}

	.primary-banner .banner-swiper-pagination {
		bottom: 10px;
	}

	.primary-banner .banner-swiper-pagination .swiper-pagination-bullet {
		width: 22px;
		height: 4px;
	}

	.primary-banner .banner-swiper-pagination .swiper-pagination-bullet-active {
		width: 22px;
		height: 4px;
	}

	/* Banner Hero 更小屏居中 - 保持嵌入布局 */
	.banner-hero-search {
		max-width: 320px;
	}
	.banner-hero-content {
		gap: 6px;
	}
	.banner-hero-title {
		font-size: 28px;
	}
	.banner-hero-desc {
		font-size: 14px;
	}
	.banner-search-input-wrap {
		padding: 0 14px 0 16px;
		padding-right: 75px;
	}
	.banner-search-btn {
		right: 5px;
		top: 5px;
		bottom: 5px;
		padding: 0 16px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.primary-banner {
		height: 300px;
		border-radius: 0;
		margin-bottom: 22px;
	}
	.banner-swiper {
		height: 300px;
	}

	.primary-banner-content {
		padding: 24px 12px;
		min-height: 300px;
		gap: 18px;
	}

	.primary-banner-left h1 {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.primary-banner-tag {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.primary-banner-price {
		font-size: 12px;
		margin-bottom: 3px;
	}

	.primary-banner-bigprice {
		font-size: 28px;
		margin-bottom: 10px;
	}

	.primary-banner-btn {
		padding: 6px 18px;
		font-size: 10px;
	}

	.primary-banner-right img {
		max-height: 200px;
	}

	.banner-swiper .swiper-button-prev,
	.banner-swiper .swiper-button-next {
		width: 30px;
		height: 30px;
	}

	.banner-swiper .swiper-button-prev::after,
	.banner-swiper .swiper-button-next::after {
		font-size: 12px;
	}

	.primary-banner .banner-swiper-pagination {
		bottom: 8px;
	}

	.primary-banner .banner-swiper-pagination .swiper-pagination-bullet {
		width: 20px;
		height: 4px;
	}

	.primary-banner .banner-swiper-pagination .swiper-pagination-bullet-active {
		width: 20px;
		height: 4px;
	}

	/* Banner Hero 超小屏 */
	.banner-hero-search {
		max-width: 300px;
	}
	.banner-hero-content {
		gap: 6px;
	}
	.banner-hero-title {
		font-size: 24px;
	}
	.banner-hero-desc {
		font-size: 13px;
	}
	.banner-search-input-wrap {
		padding: 0 12px 0 14px;
		padding-right: 70px;
	}
	.banner-search-input {
		font-size: 14px;
	}
	.banner-search-btn {
		right: 4px;
		top: 4px;
		bottom: 4px;
		padding: 0 14px;
		font-size: 12px;
	}
}

@media (max-width: 375px) {
	.primary-banner {
		height: 280px;
		border-radius: 0;
		margin-bottom: 20px;
	}
	.banner-swiper {
		height: 280px;
	}

	.primary-banner-content {
		padding: 20px 10px;
		min-height: 280px;
		gap: 15px;
	}

	.primary-banner-left h1 {
		font-size: 22px;
		margin-bottom: 8px;
	}

	.primary-banner-tag {
		font-size: 11px;
		margin-bottom: 4px;
	}

	.primary-banner-price {
		font-size: 11px;
		margin-bottom: 2px;
	}

	.primary-banner-bigprice {
		font-size: 24px;
		margin-bottom: 8px;
	}

	.primary-banner-btn {
		padding: 5px 16px;
		font-size: 9px;
	}

	.primary-banner-right img {
		max-height: 180px;
	}

	/* Banner Hero 最小屏 - 保持嵌入布局 */
	.banner-hero-search {
		max-width: 280px;
	}
	.banner-hero-content {
		gap: 4px;
	}
	.banner-hero-title {
		font-size: 20px;
	}
	.banner-hero-desc {
		font-size: 12px;
	}
	.banner-search-input-wrap {
		padding: 0 10px 0 12px;
		padding-right: 65px;
	}
	.banner-search-input {
		font-size: 13px;
	}
	.banner-search-btn {
		right: 4px;
		top: 4px;
		bottom: 4px;
		padding: 0 12px;
		font-size: 11px;
	}

	.banner-swiper .swiper-button-prev,
	.banner-swiper .swiper-button-next {
		width: 28px;
		height: 28px;
	}

	.primary-banner .banner-swiper-pagination .swiper-pagination-bullet {
		width: 18px;
		height: 3px;
	}

	.primary-banner .banner-swiper-pagination .swiper-pagination-bullet-active {
		width: 18px;
		height: 3px;
	}
}

/* ========================================
   特色卡片区域
======================================== */
.home-features {
	margin-top: 60px;
	padding: 0 30px;
}

.home-features-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	max-width: 1460px;
	margin: 0 auto;
}

.home-feature-card {
	width: 307px;
	height: 189px;
	background: #ffffff;
	border-radius: 18px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	border: 1px solid #edeeee;
	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); */
	transition: box-shadow 0.3s;
	flex-shrink: 0;
}

.home-feature-icon {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	/* background: #f5f5f5; */
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-feature-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* 標題與描述區塊：固定從 icon 下方開始，頂部對齊，確保 4 卡標題同高 */
.home-feature-content {
	position: absolute;
	top: 108px;
	left: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
}
.home-feature-title {
	font-size: 18px;
	font-weight: 700;
	color: #101828;
	margin: 0 0 6px 0;
	line-height: 1.3;
}

.home-feature-desc {
	font-size: 14px;
	color: #4a5565;
	margin: 0;
	line-height: 1.5;
	transition: font-size 0.2s ease;
	min-height: 3em; /* 3 行高度，確保描述區一致、標題對齊 */
}

/* 當 PC 下有卡片描述超過 2 行時，統一縮放字體以保持高度一致 */
@media (min-width: 993px) {
	.home-features--compact-font .home-feature-desc {
		font-size: 12px;
	}
}

/* 特色卡片响应式 */
@media (max-width: 1400px) {
	.home-feature-card {
		width: auto;
		flex: 1;
		min-width: 0;
	}
}

@media (max-width: 992px) {
	.home-features {
		margin-top: 40px;
		padding: 0 20px;
	}
	.home-features-grid {
		gap: 20px;
	}
	.home-feature-card {
		height: 170px;
		padding: 20px;
	}
	.home-feature-content {
		top: 70px;
		left: 20px;
		right: 20px;
	}
	.home-feature-icon {
		width: 50px;
		height: 50px;
		top: 16px;
		left: 50%;
		transform: translateX(-50%);
	}
	.home-feature-icon img {
		width: 30px;
		height: 30px;
	}
	.home-feature-title {
		font-size: 16px;
	}
	.home-feature-desc {
		font-size: 12px;
	}
}

@media (max-width: 768px) {
	.home-features {
		margin-top: 30px;
		padding: 0 16px;
	}
	.home-features-grid {
		flex-wrap: wrap;
		gap: 16px;
	}
	.home-feature-card {
		width: calc(50% - 8px);
		flex: none;
		height: 160px;
		padding: 18px;
	}
	.home-feature-content {
		top: 68px;
		left: 18px;
		right: 18px;
	}
}

@media (max-width: 480px) {
	.home-features {
		margin-top: 24px;
		padding: 0 12px;
	}
	.home-features-grid {
		gap: 12px;
	}
	.home-feature-card {
		width: calc(50% - 6px);
		height: 150px;
		padding: 16px;
	}
	.home-feature-content {
		top: 60px;
		left: 16px;
		right: 16px;
	}
	.home-feature-icon {
		width: 44px;
		height: 44px;
		top: 14px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10px;
	}
	.home-feature-icon img {
		width: 26px;
		height: 26px;
	}
	.home-feature-title {
		font-size: 14px;
	}
	.home-feature-desc {
		font-size: 11px;
	}
}

/* ========================================
   選擇目的地区域
======================================== */
.home-destination {
	margin-top: 60px;
	padding: 0 30px;
}

.home-destination-inner {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-destination-title {
	font-size: 36px;
	font-weight: 900;
	color: #101828;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.home-destination-subtitle {
	font-size: 20px;
	color: #4A5565;
	margin: 0 0 36px 0;
}

/* SIM 类型切换 - 滑块指示器 */
.dest-type-tabs {
	display: inline-flex;
	position: relative;
	background: #f9fafb;
	border-radius: 50px;
	padding: 12px;
	margin-bottom: 24px;
	width: 100%;
	max-width: 810px;
	box-sizing: border-box;
	gap: 6px;
}

.dest-type-slider {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 12px;
	width: calc(50% - 14px);
	background: #01488c;
	border-radius: 50px;
	/* box-shadow: 0 2px 8px rgba(1, 72, 140, 0.3); */
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.dest-type-tabs[data-active="1"] .dest-type-slider {
	left: calc(50% + 3px);
}

.dest-type-tab {
	flex: 1;
	padding: 18px 32px;
	border: none;
	background: #ffffff;
	font-size: 15px;
	font-weight: 700;
	color: #01488c;
	cursor: pointer;
	border-radius: 26px;
	transition: all 0.3s;
	font-family: inherit;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}

.dest-type-tab.active {
	color: #ffffff;
	background: transparent;
}

.dest-type-tab:not(.active):hover {
	color: #01488c;
}

/* 区域切换 - 滑块指示器 */
.dest-region-tabs {
	display: inline-flex;
	align-items: center;
	gap: 0;
	flex-wrap: nowrap;
	justify-content: space-between;
	position: relative;
	background: #f9fafb;
	border-radius: 50px;
	padding: 12px;
	width: auto;
	min-width: 810px;
	/* margin: 0 auto; */
}

.dest-region-slider {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 12px;
	width: 80px;
	background: #01488c;
	border-radius: 50px;
	/* box-shadow: 0 2px 6px rgba(1, 72, 140, 0.25); */
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
	pointer-events: none;
}

.dest-region-tab {
	padding: 18px 40px;
	border: none;
	background: #ffffff;
	font-size: 15px;
	font-weight: 700;
	color: #01488c;
	cursor: pointer;
	border-radius: 50px;
	text-align: center;
	transition: color 0.3s;
	font-family: inherit;
	white-space: nowrap;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.dest-region-tab.active {
	color: #ffffff;
	background: transparent;
}

.dest-region-tab:not(.active):hover {
	color: #01488c;
}

/* 選擇目的地响应式 */
@media (max-width: 992px) {
	.home-destination {
		margin-top: 40px;
		padding: 0 20px;
	}
	.home-destination-title {
		font-size: 28px;
	}
	.home-destination-subtitle {
		font-size: 14px;
		margin-bottom: 28px;
	}
	.dest-type-tab {
		padding: 12px 0;
		font-size: 15px;
	}
	.dest-region-tab {
		padding: 8px 20px;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.home-destination {
		margin-top: 30px;
		padding: 0 16px;
	}
	.home-destination-title {
		font-size: 24px;
	}
	.home-destination-subtitle {
		font-size: 13px;
		margin-bottom: 24px;
	}
	.dest-type-tab {
		padding: 12px 0;
		font-size: 14px;
	}
	.home-destination-inner {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.dest-region-tabs {
		justify-content: flex-start;
		min-width: max-content;
	}
	.dest-region-tab {
		padding: 8px 16px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.home-destination {
		margin-top: 24px;
		padding: 0 12px;
	}
	.home-destination-title {
		font-size: 22px;
	}
	.home-destination-subtitle {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.dest-type-tabs {
		margin-bottom: 16px;
		min-width: 0;
		width: calc(100% - 24px);
		max-width: 100%;
	}
	.dest-type-tab {
		padding: 10px 0;
		font-size: 13px;
	}
	.dest-region-tab {
		padding: 7px 14px;
		font-size: 12px;
	}
}

/* ========================================
   目的地卡片网格
======================================== */
.home-dest-grid {
	margin-top: 60px;
	padding: 0 30px;
}

.home-dest-grid-inner {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}

.dest-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #eee;
	transition: box-shadow 0.3s, transform 0.3s;
}

.dest-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.dest-card-img {
	width: 100%;
	height: 240px;
	overflow: hidden;
	background-color: #f0f0f0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.dest-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.dest-card:hover .dest-card-img img {
	transform: scale(1.05);
}

.dest-card-info {
	padding: 16px 18px 18px;
}

.dest-card-name {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 4px 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 缺貨時標題單行省略，懸停顯示完整文字（適用於首頁、歸檔、destination 等） */
.dest-card.is-out-of-stock .dest-card-name {
	-webkit-line-clamp: 1;
}

.dest-card-price {
	font-size: 14px;
	color: #01488C;
	margin: 0;
}

/* 目的地卡片响应式 */
@media (max-width: 1400px) {
	.home-dest-grid-inner {
		gap: 20px;
	}
	.dest-card-img {
		height: 200px;
	}
}

@media (max-width: 1200px) {
	.home-dest-grid-inner {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}
	.dest-card-img {
		height: 190px;
	}
}

@media (max-width: 992px) {
	.home-dest-grid {
		margin-top: 40px;
		padding: 0 20px;
	}
	.home-dest-grid-inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
	.dest-card-img {
		height: 180px;
	}
	.dest-card-name {
		font-size: 16px;
	}
	.dest-card-price {
		font-size: 13px;
	}
}

@media (max-width: 768px) {
	.home-dest-grid {
		margin-top: 30px;
		padding: 0 16px;
	}
	.home-dest-grid-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.dest-card-img {
		height: 160px;
	}
	.dest-card-info {
		padding: 12px 14px 14px;
	}
	.dest-card-name {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.home-dest-grid {
		margin-top: 24px;
		padding: 0 12px;
	}
	.home-dest-grid-inner {
		gap: 12px;
	}
	.dest-card-img {
		height: 140px;
	}
	.dest-card-info {
		padding: 10px 12px 12px;
	}
	.dest-card-name {
		font-size: 14px;
	}
	.dest-card-price {
		font-size: 12px;
	}
}

/* 查看所有目的地按钮 */
.dest-grid-btn-wrap {
	margin-top: 60px;
	text-align: center;
}

.dest-grid-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 237px;
	height: 68px;
	background: #01488c;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	border: none;
	border-radius: 13px;
	transition: all 0.3s;
	font-family: inherit;
}

.dest-grid-btn:hover {
	box-shadow: 0 0 16px rgba(1, 72, 140, 0.45);
	color: #ffffff;
}

/* ========================================
   什麼是 eSIM 介紹区
======================================== */
.home-esim-intro {
	margin-top: 60px;
	padding: 0 30px;
}

.home-esim-intro-inner {
	width: 1320px;
	height: 423px;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	/* padding: 0 80px; */
	padding-left: 80px;
	box-sizing: border-box;
	background: #f2f8ff;
}

.esim-intro-left {
	flex: 1;
	max-width: 560px;
}

.esim-intro-title {
	font-size: 36px;
	font-weight: 900;
	color: #1a1a2e;
	margin: 0 0 20px 0;
	line-height: 1.3;
}

.esim-intro-highlight {
	color: #01488c; /* 淺藍底 #f2f8ff 上需足夠對比，避免亮橙 #ff9f01 */
}

.esim-intro-desc {
	font-size: 15px;
	color: #3d3d3d;
	line-height: 1.8;
	margin: 0 0 32px 0;
}

.esim-intro-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: #01488c;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	transition: box-shadow 0.3s;
	font-family: inherit;
}

.esim-intro-btn:hover {
	box-shadow: 0 0 12px rgba(1, 72, 140, 0.4);
	color: #ffffff;
}

.esim-intro-right {
	flex-shrink: 0;
	width: 680px;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 48px;
}

.esim-intro-right img {
	width: 380px;
	height: 326px;
	object-fit: cover;
	border-radius: 58px;
}

/* eSIM 介紹响应式 */
@media (max-width: 1360px) {
	.esim-intro-right {
		width: 500px;
		padding-right: 30px;
	}
	.esim-intro-right img {
		width: 340px;
		height: 292px;
	}
}

@media (max-width: 1200px) {
	.home-esim-intro-inner {
		padding: 0 50px;
	}
	.esim-intro-right {
		width: 400px;
		padding-right: 20px;
	}
	.esim-intro-right img {
		width: 300px;
		height: 258px;
		border-radius: 48px;
	}
	.esim-intro-title {
		font-size: 30px;
	}
}

@media (max-width: 992px) {
	.home-esim-intro {
		margin-top: 40px;
		padding: 0 20px;
	}
	.home-esim-intro-inner {
		height: auto;
		padding: 40px;
		flex-direction: column;
		text-align: center;
		gap: 30px;
	}
	.esim-intro-left {
		max-width: 100%;
	}
	.esim-intro-title {
		font-size: 28px;
	}
	.esim-intro-desc {
		font-size: 14px;
		margin-bottom: 24px;
	}
	.esim-intro-right {
		width: 100%;
		height: auto;
		padding-right: 0;
		justify-content: center;
	}
	.esim-intro-right img {
		width: 320px;
		height: 275px;
		border-radius: 40px;
	}
}

@media (max-width: 768px) {
	.home-esim-intro-inner {
		padding: 30px 24px;
		gap: 24px;
	}
	.esim-intro-title {
		font-size: 24px;
	}
	.esim-intro-desc {
		font-size: 13px;
	}
	.esim-intro-right img {
		width: 280px;
		height: 240px;
		border-radius: 36px;
	}
}

@media (max-width: 480px) {
	.home-esim-intro {
		margin-top: 24px;
		padding: 0 12px;
	}
	.home-esim-intro-inner {
		padding: 24px 16px;
		gap: 20px;
	}
	.esim-intro-title {
		font-size: 22px;
	}
	.esim-intro-desc {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.esim-intro-btn {
		padding: 10px 24px;
		font-size: 14px;
	}
	.esim-intro-right {
		width: 220px;
		height: 190px;
	}
	.esim-intro-right img {
		width: 240px;
		height: 206px;
		border-radius: 30px;
	}
}

/* ========================================
   客戶評價
======================================== */
.home-reviews {
	margin-top: 60px;
	background: #f9fafb;
	padding: 60px 0;
}

.home-reviews-inner {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	text-align: center;
}

.reviews-title {
	font-size: 36px;
	font-weight: 900;
	color: #101828;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.reviews-subtitle {
	font-size: 20px;
	color: #4A5565;
	margin: 0 0 40px 0;
}

.reviews-swiper-wrap {
	overflow: hidden;
}

.reviews-swiper {
	overflow: hidden; /* 關鍵：從 visible 改回 hidden */
}

.reviews-swiper .swiper-wrapper {
	display: flex;
	flex-direction: row;
}

.reviews-swiper .swiper-slide {
	height: auto;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Swiper 未初始化时，确保剛好顯示 3 條、卡片之间有间距 */
.reviews-swiper:not(.swiper-initialized) .swiper-wrapper {
	gap: 30px;
}

.reviews-swiper:not(.swiper-initialized) .swiper-slide {
	width: calc((100% - 60px) / 3);
	flex-shrink: 0;
}

/* Swiper 初始化后由 spaceBetween 控制间距，避免双重间距 */
.reviews-swiper.swiper-initialized .swiper-wrapper {
	gap: 0;
}

/* 评价卡片 */
.review-card {
	width: 100%;
	min-height: 312px;
	background: #ffffff;
	border-radius: 18px;
	padding: 28px 24px;
	box-sizing: border-box;
	text-align: left;
	border: 1px solid #eee;
	display: flex;
	flex-direction: column;
}

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

.review-user {
	display: flex;
	align-items: center;
	gap: 10px;
}

.review-avatar {
	width: 23px;
	height: 23px;
	border-radius: 50%;
	object-fit: cover;
}

.review-user-info {
	display: flex;
	flex-direction: column;
}

.review-name {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a2e;
	line-height: 1.3;
}

.review-date {
	font-size: 13px;
	color: #6b7280; /* 白底上 #aaa 對比不足 */
}

.review-ip-icon {
	width: 39px;
	height: 39px;
	min-width: 24px;
	min-height: 24px;
	max-width: 39px;
	max-height: 39px;
	object-fit: contain;
	flex-shrink: 0;
}

.review-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.review-meta .review-stars.vs-stars {
	display: flex;
	gap: 2px;
}

.review-meta .vs-star-wrapper {
	position: relative;
	width: 16px;
	height: 16px;
	display: inline-block;
}

.review-meta .vs-star-wrapper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
}

.review-meta .vs-star-empty {
	fill: #ddd;
}

.review-meta .vs-star-filled {
	fill: #00C950;
}

.review-product {
	font-size: 13px;
	color: #4b5563; /* 小字連結需 ≥4.5:1 */
	text-decoration: none;
	transition: color 0.2s;
}

.review-product:hover {
	color: #01488c;
}

.review-text {
	font-size: 14px;
	color: #3d3d3d;
	line-height: 1.7;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 箭头导航 */
.reviews-nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

.reviews-nav-btn {
	width: 53px;
	height: 53px;
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	color: #333;
}

.reviews-nav-btn:hover {
	border-color: #01488c;
	color: #01488c;
}

/* 客戶評價响应式 */
@media (max-width: 992px) {
	.home-reviews {
		margin-top: 40px;
		padding: 40px 0;
	}
	.home-reviews-inner {
		padding: 0 20px;
	}
	.reviews-title {
		font-size: 28px;
	}
	.reviews-subtitle {
		font-size: 14px;
		margin-bottom: 30px;
	}
	.reviews-swiper:not(.swiper-initialized) .swiper-slide {
		width: calc((100% - 20px) / 2);
	}
	.review-card {
		width: 100%;
		min-height: 280px;
		padding: 24px 20px;
	}
	.review-ip-icon {
		width: 34px;
		height: 34px;
		max-width: 34px;
		max-height: 34px;
	}
}

@media (max-width: 768px) {
	.home-reviews {
		margin-top: 30px;
		padding: 30px 0;
	}
	.home-reviews-inner {
		padding: 0 16px;
	}
	.reviews-title {
		font-size: 24px;
	}
	.reviews-subtitle {
		font-size: 13px;
		margin-bottom: 24px;
	}
	.reviews-swiper:not(.swiper-initialized) .swiper-slide {
		width: calc((100% - 20px) / 2);
	}
	.review-card {
		width: 100%;
		min-height: 260px;
		padding: 20px 18px;
	}
	.review-text {
		font-size: 13px;
	}
	.review-ip-icon {
		width: 30px;
		height: 30px;
		max-width: 30px;
		max-height: 30px;
	}
}

@media (max-width: 480px) {
	.home-reviews {
		margin-top: 24px;
		padding: 24px 0;
	}
	.home-reviews-inner {
		padding: 0 12px;
	}
	.reviews-title {
		font-size: 22px;
	}
	.reviews-subtitle {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.reviews-swiper:not(.swiper-initialized) .swiper-slide {
		width: 100%;
	}
	.review-card {
		width: 100%;
		min-height: 240px;
		padding: 18px 16px;
	}
	.review-name {
		font-size: 13px;
	}
	.review-text {
		font-size: 12px;
	}
	.review-ip-icon {
		width: 26px;
		height: 26px;
		max-width: 26px;
		max-height: 26px;
	}
	.reviews-nav {
		margin-top: 24px;
	}
	.reviews-nav-btn {
		width: 56px;
		height: 56px;
	}
}

/* ========================================
   為什麼選擇我們
======================================== */
.home-why-us {
	margin-top: 60px;
	padding: 0 30px;
}

.home-why-us-inner {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

.why-us-title {
	font-size: 36px;
	font-weight: 700;
	color: #101828;
	margin: 0 0 12px 0;
	line-height: 1.3;
	/* font-style: italic; */
}

.why-us-subtitle {
	font-size: 20px;
	color: #4A5565;
	margin: 0 0 40px 0;
}

.why-us-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.why-us-card {
	background: #F9FAFB;
	border-radius: 24px;
	padding: 36px 24px 32px;
	text-align: center;
	/* border: 1px solid #eee; */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.3s;
}

.why-us-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.why-us-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.why-us-icon img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.why-us-card-title {
	font-size: 18px;
	font-weight: 700;
	color: #101828;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.why-us-card-desc {
	font-size: 13px;
	color: #4A5565;
	line-height: 1.7;
	margin: 0;
}

/* 為什麼選擇我們响应式 */
@media (max-width: 1200px) {
	.why-us-grid {
		gap: 24px;
	}
	.why-us-card {
		padding: 28px 20px 24px;
	}
}

@media (max-width: 992px) {
	.home-why-us {
		margin-top: 40px;
		padding: 0 20px;
	}
	.why-us-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.why-us-title {
		font-size: 28px;
	}
	.why-us-subtitle {
		font-size: 14px;
		margin-bottom: 30px;
	}
	.why-us-card-title {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.home-why-us {
		margin-top: 30px;
		padding: 0 16px;
	}
	.why-us-grid {
		gap: 16px;
	}
	.why-us-card {
		padding: 24px 16px 20px;
	}
	.why-us-title {
		font-size: 24px;
	}
	.why-us-subtitle {
		font-size: 13px;
		margin-bottom: 24px;
	}
	.why-us-icon {
		width: 50px;
		height: 50px;
		margin-bottom: 16px;
	}
	.why-us-icon img {
		width: 50px;
		height: 50px;
	}
	.why-us-card-title {
		font-size: 15px;
	}
	.why-us-card-desc {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.home-why-us {
		margin-top: 24px;
		padding: 0 12px;
	}
	.why-us-grid {
		gap: 12px;
	}
	.why-us-card {
		padding: 20px 14px 18px;
	}
	.why-us-title {
		font-size: 22px;
	}
	.why-us-subtitle {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.why-us-icon {
		width: 44px;
		height: 44px;
		margin-bottom: 14px;
	}
	.why-us-icon img {
		width: 44px;
		height: 44px;
	}
	.why-us-card-title {
		font-size: 14px;
	}
	.why-us-card-desc {
		font-size: 11px;
	}
}

/* ========================================
   常見問題 FAQ
======================================== */
.home-faq {
	margin-top: 60px;
	background: #ffffff;
}

.home-faq-inner {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	text-align: center;
}

.faq-title {
	font-size: 36px;
	font-weight: 900;
	color: #101828;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.faq-subtitle {
	font-size: 20px;
	color: #4A5565;
	margin: 0 0 32px 0;
}

/* FAQ 选项卡 */
.faq-tabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.faq-tab {
	padding: 13px 29px;
	border-radius: 14px;
	border: 2px solid #E5E7EB;
	background: #ffffff;
	color: #333;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s;
	white-space: nowrap;
}

.faq-tab:hover {
	border-color: #01488c;
	color: #01488c;
}

.faq-tab.active {
	background: #01488c;
	color: #ffffff;
	border-color: #01488c;
}

/* FAQ 卡片网格 */
.faq-grid {
	display: flex;
	gap: 30px;
}

.faq-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* FAQ 单个卡片 */
.faq-item {
	width: 100%;
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	overflow: hidden;
	transition: all 0.3s;
}

.faq-item.hidden {
	display: none;
}

.faq-question {
	display: flex;
	align-items: center;
	height: 66px;
	padding: 0 20px;
	cursor: pointer;
	gap: 12px;
	user-select: none;
}

.faq-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	background: #F3F4F6;
	border-radius: 10px;
}

.faq-icon img {
	width: 14px;
	height: 14px;
	display: block;
}

.faq-icon svg {
	display: none;
}

.faq-question-text {
	flex: 1;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a2e;
	text-align: left;
}

.faq-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #888;
	transition: transform 0.3s;
}

.faq-item.open .faq-arrow {
	transform: rotate(180deg);
}

/* FAQ 答案区域 */
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, padding 0.35s ease;
	padding: 0 20px;
}

.faq-item.open .faq-answer {
	max-height: 300px;
	padding: 0 20px 20px 20px;
}

.faq-answer p {
	margin: 0;
	font-size: 14px;
	color: #555;
	line-height: 1.7;
	text-align: left;
}

/* FAQ 响应式 */
@media (max-width: 1400px) {
	.faq-grid {
		gap: 24px;
	}
}

@media (max-width: 992px) {
	.home-faq {
		margin-top: 40px;
		padding: 40px 0;
	}
	.home-faq-inner {
		padding: 0 20px;
	}
	.faq-title {
		font-size: 28px;
	}
	.faq-subtitle {
		font-size: 14px;
		margin-bottom: 24px;
	}
	.faq-grid {
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 768px) {
	.home-faq {
		margin-top: 30px;
		padding: 30px 0;
	}
	.faq-title {
		font-size: 24px;
	}
	.faq-subtitle {
		font-size: 13px;
	}
	.faq-tabs {
		gap: 8px;
		margin-bottom: 24px;
	}
	.faq-tab {
		padding: 8px 18px;
		font-size: 13px;
	}
	.faq-question {
		height: 56px;
		padding: 0 16px;
		gap: 10px;
	}
	.faq-question-text {
		font-size: 14px;
	}
	.faq-answer p {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.home-faq {
		margin-top: 24px;
		padding: 24px 0;
	}
	.faq-title {
		font-size: 22px;
	}
	.faq-subtitle {
		font-size: 12px;
	}
	.faq-tabs {
		gap: 6px;
		margin-bottom: 20px;
	}
	.faq-tab {
		padding: 7px 14px;
		font-size: 12px;
	}
	.faq-question {
		height: 50px;
		padding: 0 14px;
		gap: 8px;
	}
	.faq-question-text {
		font-size: 13px;
	}
	.faq-answer p {
		font-size: 12px;
	}
}