/* ========================================
   VAPESMALL - Single Product Page Styles
   Based on Design Specifications
======================================== */

:root {
	--vs-primary: #FFAA01;
	--vs-primary-hover: #E69A00;
	--vs-secondary: #333333;
	--vs-text: #333333;
	--vs-text-light: #666666;
	--vs-text-muted: #999999;
	--vs-border: #E0E0E0;
	--vs-bg: #F5F5F5;
	--vs-white: #FFFFFF;
	--vs-success: #28A745;
	--vs-error: #DC3545;
}

/* ========================================
   Breadcrumb
======================================== */

.vs-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 15px 0;
	font-size: 14px;
	color: var(--vs-text-muted);
}

.vs-breadcrumb a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--vs-text-muted);
	text-decoration: none;
	transition: color 0.3s;
}

.vs-breadcrumb a:hover {
	color: var(--vs-primary);
}

.vs-breadcrumb-sep {
	margin: 0 10px;
	color: var(--vs-text-muted);
}

.vs-breadcrumb-current {
	color: var(--vs-text);
}

/* ========================================
   Product Layout
======================================== */

.vs-product-container {
	max-width: 1460px;
	margin: 0 auto;
	padding: 0 70px;
}

@media (max-width: 1400px) {
	.vs-product-container {
		max-width: 1200px;
	}
}

@media (max-width: 1200px) {
	.vs-product-container {
		max-width: 960px;
		padding: 0 20px;
	}
}

@media (max-width: 1024px) {
	.vs-product-container {
		max-width: 800px;
		padding: 0 20px;
	}
}

@media (max-width: 768px) {
	.vs-product-container {
		padding: 0 30px;
		padding-top: 0;
	}
}

@media (max-width: 576px) {
	.vs-product-container {
		padding: 0 12px;
		padding-top: 0;
	}
}

.vs-product-main {
	display: grid;
    grid-template-columns: 487.5px 1fr;
    gap: 32px;
    margin-bottom: 50px;
}

/* ========================================
   Product Gallery
======================================== */

.vs-product-gallery {
	position: sticky;
	top: 100px;
	align-self: start;
}

.vs-gallery-main {
	/* width: 75%; */
    background: var(--vs-white);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8E8E5;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
}

.vs-gallery-main img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: opacity 0.15s ease;
}

.vs-gallery-thumbs {
	gap: 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* width: 65%; */
    margin-left: auto;
    margin-right: auto;
}

.vs-gallery-thumb {
	aspect-ratio: 1 / 1;
	border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--vs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8E8E5;
}

.vs-gallery-thumb:hover,
.vs-gallery-thumb.active {
	border-color: var(--vs-primary);
}

.vs-gallery-thumb img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

/* ========================================
   Product Summary
======================================== */

.vs-product-summary {
	position: relative;
	align-self: start;
	max-width: 800px;
}

/* 标题和分享按钮容器 */
.vs-title-share-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 12px;
}

.vs-product-title {
	font-family: 'AvenirLTStd-Black', sans-serif;
    color: var(--vs-secondary);
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2;
	margin-bottom: 0;
	flex: 1;
}

/* 社交分享按钮 */
.vs-title-share-wrapper .vs-social-share {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	margin-top: 4px;
}

.vs-title-share-wrapper .vs-social-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	text-decoration: none;
	overflow: hidden;
}

.vs-title-share-wrapper .vs-social-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vs-title-share-wrapper .vs-social-icon.vs-social-gmail img {
	width: 70%;
	height: 70%;
}

.vs-title-share-wrapper .vs-social-icon:hover {
	transform: translateY(-2px);
}

/* 评分区域 */
.vs-product-rating {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.vs-compat-inline-rating {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.vs-compat-inline-label {
	white-space: nowrap;
}

/* ========================================
   兼容性檢查按鈕（置於檔案前段：線上環境若中段 CSS 解析失敗，後方規則會整段失效）
======================================== */

/* 修復 Tab3 圖標顯示 */
.vs-compat-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #0B3B8C url('../images/single/shouji.png') no-repeat center center;
	background-size: 100% 100%;
	display: grid;
	place-items: center;
}

/* 查看兼容設備列表按鈕 */
.vs-compat-open-btn {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	background: #fff;
	color: #01488C;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	width: 100%;
}

.vs-compat-open-btn:hover {
	border-color: #01488C;
	background: #F9FAFB;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.1);
}

.vs-compat-btn-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* 評分列旁：檢查相容性（覆蓋上方 .vs-compat-open-btn 藍色字） */
.vs-compat-open-btn.vs-compat-open-btn--inline {
	width: auto;
	max-width: 100%;
	margin-top: 0;
	padding: 10px 18px;
	font-size: 13px;
	white-space: nowrap;
	color: #101828;
	font-weight: 700;
}

.vs-compat-open-btn.vs-compat-open-btn--inline:hover {
	color: #101828;
	border-color: #d1d5db;
	transform: none;
	box-shadow: none;
}

.vs-compat-open-btn.vs-compat-open-btn--inline .vs-compat-btn-icon--svg {
	flex-shrink: 0;
	color: #4a5565;
}

.vs-compat-open-btn.vs-compat-open-btn--inline .vs-compat-inline-label {
	color: inherit;
}

/* ========================================
   網絡覆蓋 Tab：覆蓋目的地卡片（置於檔案前段，理由同上）
======================================== */

.vs-network-coverage-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px 20px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.vs-network-coverage-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.vs-network-coverage-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #01488c;
	color: #fff;
	flex-shrink: 0;
}

.vs-network-coverage-globe {
	display: block;
}

.vs-network-coverage-title {
	font-size: 18px;
	font-weight: 800;
	color: #101828;
}

.vs-network-coverage-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px 12px;
	margin-top: 16px;
}

.vs-network-coverage-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	min-width: 0;
}

.vs-network-coverage-flag {
	width: 32px;
	height: auto;
	max-height: 24px;
	object-fit: contain;
	border-radius: 2px;
}

.vs-network-coverage-name {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	line-height: 1.35;
}

.vs-supported-countries-btn--tab-more {
	margin-top: 20px;
	width: 100%;
	box-sizing: border-box;
	background: #01488c !important;
	border: 1px solid #01488c !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: 10px;
	padding: 14px 18px;
	gap: 10px;
}

.vs-supported-countries-btn--tab-more:hover {
	background: #013a73 !important;
	border-color: #013a73 !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.25);
}

.vs-supported-countries-btn-emoji {
	font-size: 18px;
	line-height: 1;
}

.vs-supported-countries-btn-arrow {
	font-weight: 800;
	margin-left: 4px;
}

@media (max-width: 900px) {
	.vs-network-coverage-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.vs-network-coverage-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vs-rating-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	background: linear-gradient(135deg, #FFFEF9 0%, #F0FDF4 100%);
	border: 1px solid;
	border-image: linear-gradient(135deg, #F0FDF4 0%, #FFFEF9 100%) 1;
	border-radius: 8px;
	border: 1px solid #00C950;
	margin-right: 10px;
}

.vs-rating-score {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #000000;
	line-height: 1;
}

.vs-stars {
	display: flex;
	gap: 4px;
}

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

.vs-star-empty,
.vs-star-filled {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
}

.vs-star-empty {
	fill: rgba(0, 201, 80, 0.2);
	stroke: none;
}

.vs-star-filled {
	fill: #00C950;
	stroke: none;
}

.vs-review-count {
	font-size: 14px;
	color: #111827;
	white-space: nowrap;
}

.vs-rating-main {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.vs-rating-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.vs-rating-trustpilot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #111827;
}

.vs-rating-trustpilot-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.vs-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #111827;
}

.vs-rating-badge-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.vs-rating-badge-text {
	font-weight: 700;
}

/* 無評分狀態 */
.vs-rating-empty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #F7FAFC;
	border-radius: 6px;
}

.vs-rating-empty-icon {
	width: 16px;
	height: 16px;
	fill: #CBD5E0;
}

.vs-rating-empty-text {
	font-size: 14px;
	color: #4A5565;
}

/* Price */
.vs-product-price,.woocommerce-variation-price .price {
	display: flex;
	align-items: baseline;
	gap: 15px;
	margin-bottom: 8px;
	width: 100%;
}

.vs-price-original,.woocommerce-variation-price .price del {
	font-size: 24px;
	color: var(--vs-text-muted);
	text-decoration: line-through;
}

.vs-price-original .woocommerce-Price-amount,.woocommerce-variation-price .price ins .woocommerce-Price-amount {
	color: inherit;
}

.vs-price-current,.woocommerce-variation-price .price ins {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: var(--vs-primary);
	text-decoration: none;
}

.vs-price-current .woocommerce-Price-amount,.woocommerce-variation-price .price ins .woocommerce-Price-amount {
	color: inherit;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).disabled .variable-item-contents:before, .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).disabled:hover .variable-item-contents:before{
	display: none;
}

/* Description */
.vs-product-desc {
	margin-bottom: 16px;
    font-weight: 300;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
}

.vs-product-desc p {
	margin: 0 0 12px;
}

.vs-product-desc p:last-child {
	margin-bottom: 0;
}

/* Key Features */
.vs-key-features {
	margin-bottom: 0;
	padding: 16px 0;
	border-top: 1px solid var(--vs-border);
}

.vs-key-features-title {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--vs-secondary);
	margin-bottom: 8px;
	text-transform: uppercase;
}

.vs-features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 40px;
}

.vs-feature-item {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	padding: 4px 0;
	gap: 10px;
	border-bottom: 1px dashed var(--vs-border);
}

.vs-feature-label {
	color: var(--vs-text-light);
}

.vs-feature-value {
	color: var(--vs-text);
	font-weight: 600;
}

/* ========================================
   手機支援區塊（ACF 字段）
======================================== */
.vs-mobile-support {
	margin-bottom: 0;
	padding: 16px 0;
	border-top: 1px solid var(--vs-border);
}

.vs-mobile-support-title {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--vs-secondary);
	margin-bottom: 12px;
}

.vs-mobile-support-content {
	font-size: 14px;
	line-height: 1.8;
	color: var(--vs-text);
	padding: 12px 16px;
	background: #f8f9fa;
	border-radius: 8px;
	border-left: 3px solid var(--vs-primary);
}

.vs-mobile-support-content p {
	margin: 0 0 8px 0;
}

.vs-mobile-support-content p:last-child {
	margin-bottom: 0;
}

.vs-mobile-support-content ul,
.vs-mobile-support-content ol {
	margin: 8px 0;
	padding-left: 20px;
}

.vs-mobile-support-content li {
	margin-bottom: 4px;
}

.vs-mobile-support-hint {
	margin-top: 12px;
	padding: 10px 14px;
	background: #fff8e6;
	border: 1px solid #ffe0a3;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: #856404;
}

.vs-mobile-support-hint::before {
	content: "💡 ";
}

/* Variations */
.variations th{
	font-family: 'AvenirLTStd-Heavy', sans-serif;
}
.vs-variations {
	margin-bottom: 28px;    
	margin-top: 10px;
}

.vs-variation-group {
	margin-bottom: 16px;
}

.vs-variation-label {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--vs-secondary);
	margin-bottom: 8px;
	text-transform: uppercase;
}

.vs-variation-select {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--vs-border);
	border-radius: 8px;
	font-size: 14px;
	color: var(--vs-text);
	background: var(--vs-white);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.vs-variation-select:focus {
	outline: none;
	border-color: var(--vs-primary);
}

.vs-product-main .vs-variations th .woo-selected-variation-item-name{
	display: none !important;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover{
	-webkit-box-shadow: var(--wvs-selected-item-box-shadow, 0 0 0 2px var(--vs-primary)) !important;
	box-shadow: var(--wvs-selected-item-box-shadow, 0 0 0 2px var(--vs-primary)) !important;
}

.woo-variation-swatches.wvs-show-label .variations th label{
	font-size: 18px;
}
.woo-variation-swatches.wvs-show-label .variations td, .woo-variation-swatches.wvs-show-label .variations th{
	margin-bottom: 8px;
}

/* ========================================
   Variation Add to Cart (single_variation_wrap)
======================================== */
.single_variation_wrap {
	margin-top: 20px;
}

.vs-variation-cart-wrapper {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.vs-variation-quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--vs-border);
	border-radius: 0;
	overflow: hidden;
	width: fit-content;
	border-radius: 12px;
}

/* .vs-variation-quantity .vs-qty-btn {
	width: 44px;
	height: 48px;
	border: none;
	background: var(--vs-bg);
	font-size: 20px;
	font-weight: 600;
	color: var(--vs-text);
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-variation-quantity .vs-qty-btn:hover {
	background: var(--vs-primary);
	color: var(--vs-white);
} */

/* .vs-variation-quantity .vs-qty-input {
	width: 60px;
	height: 48px;
	border: none;
	border-left: 1px solid var(--vs-border);
	border-right: 1px solid var(--vs-border);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--vs-text);
	background: var(--vs-white);
}

.vs-variation-quantity .vs-qty-input::-webkit-outer-spin-button,
.vs-variation-quantity .vs-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
} */

.vs-variation-buttons {
	display: flex;
	gap: 12px;
	width: 44%;
}

.vs-variation-buttons .vs-btn-add-cart {
	width: 100%;
}

.vs-variation-buttons .vs-btn-add-cart:hover {
	background: var(--vs-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 170, 1, 0.3);
}

.vs-variation-buttons .vs-btn-buy-now {
	flex: 1;
	height: 48px;
	background: #333333;
	border: none;
	border-radius: 8px;
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--vs-white);
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}

.vs-variation-buttons .vs-btn-buy-now:hover {
	background: #444444;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Quantity & Add to Cart */
.vs-add-to-cart {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	align-items: center;
}

.vs-quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--vs-border);
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	width: 300px;
}

.vs-qty-btn {
	width: 44px;
	height: 48px;
	border: none;
	background: var(--vs-white);
	font-size: 20px;
	font-weight: 600;
	color: var(--vs-text);
	cursor: pointer;
	transition: all 0.3s;
	border-radius: 0;
	flex-shrink: 0;
}

.vs-qty-btn:hover,
.vs-qty-btn:active,
.vs-qty-btn:focus {
	background: #01488C !important;
	color: var(--vs-white);
}

.vs-qty-input {
	flex: 1;
	height: 48px;
	border: none;
	border-left: 1px solid var(--vs-border);
	border-right: 1px solid var(--vs-border);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--vs-text);
	background: var(--vs-white);
}

.vs-qty-input::-webkit-outer-spin-button,
.vs-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vs-btn-add-cart {
	background: var(--vs-primary);
    border: none;
    font-family: 'AvenirLTStd-Heavy', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--vs-white);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 0;
	flex: 1;
	width: auto;
	min-width: 0;
	align-self: stretch;
}

.vs-btn-add-cart:hover {
	background: var(--vs-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 170, 1, 0.3);
}

/* Social & Wishlist */
.vs-product-actions {
	display: flex;
	align-items: center;
}

.vs-social-share {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vs-social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vs-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vs-text-light);
	text-decoration: none;
	transition: all 0.3s;
}

.vs-social-icon:hover {
	background: var(--vs-primary);
	color: var(--vs-white);
}

.vs-btn-wishlist {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--vs-text-light);
	cursor: pointer;
	transition: color 0.3s;
}

.vs-btn-wishlist:hover {
	color: var(--vs-primary);
}

.vs-btn-wishlist svg {
	stroke: currentColor;
}

/* ========================================
   售完提示（位於 Tab 上方）
======================================== */

.vs-product-out-of-stock-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
	animation: vs-out-of-stock-pulse 2s ease-in-out infinite;
}

@keyframes vs-out-of-stock-pulse {
	0%, 100% { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12); }
	50% { box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2); }
}

.vs-product-out-of-stock-banner .vs-out-of-stock-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.vs-product-out-of-stock-banner .vs-out-of-stock-inner,
.vs-product-out-of-stock-banner .vs-out-of-stock-text {
	font-size: 15px;
	font-weight: 600;
	color: #b91c1c;
	line-height: 1.4;
}

.vs-product-out-of-stock-banner .vs-out-of-stock-inner .stock,
.vs-product-out-of-stock-banner .stock {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-size: 15px;
	font-weight: 600;
	color: #b91c1c;
}

/* ========================================
   Product Tabs
======================================== */

.vs-product-tabs {
	margin-bottom: 30px;
}

.vs-tabs-nav {
	display: flex;
	gap: 32px;
	border-bottom: none;
	margin-bottom: 24px;
	padding-bottom: 0;
}

.vs-global-sim-tabs .vs-tabs-nav {
    border-bottom: none;
    width: fit-content;
}

.vs-global-sim-tabs .vs-tabs-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--vs-border);
    z-index: 1;
    display: none; /* 移除全局底線 */
}

.vs-tab-btn {
	min-width: 246px;
	height: 48px;
	padding: 0;
    background: none;
    border: none;
    font-family: 'AvenirLTStd-Heavy', sans-serif;
    color: #4A5565;
    cursor: pointer;
    position: relative;
    transition: color 0.3s, background-color 0.3s;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.vs-tab-btn:hover {
	color: var(--vs-text);
}

.vs-tab-btn.active {
	color: #101828;
	background-color: #F9FAFB;
}

.vs-tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--vs-text);
}

.vs-tab-link-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* 產品規格 Tab（多組切換 + 規格卡） */
.vs-product-specs {
	margin-top: 4px;
}

.vs-specs-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.vs-specs-track-wrap {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.vs-specs-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	will-change: transform;
	transition: transform 0.28s ease;
	/* 禁止原生橫向捲動與捲動條，改由按鈕 + transform 切換 */
	overflow: visible;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.vs-specs-track::-webkit-scrollbar {
	display: none;
	height: 0;
	width: 0;
}

.vs-specs-chip {
	flex-shrink: 0;
	box-sizing: border-box;
	position: relative;
	padding: 10px 6px 14px;
	border: none;
	background: transparent;
	color: #64748b;
	font-size: 14px;
	font-weight: 800;
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	transition: color 0.2s;
	/* 寬度由 JS 設為視窗的 1/4，固定同屏 4 格 */
}

.vs-specs-chip:hover {
	color: #01488c;
}

/* 規格名稱：固定四格寬，底線為「該格」寬度的 60% 置中（與文字 60% 不搶佔鄰格） */
.vs-specs-chip-label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
	padding-bottom: 0;
	box-sizing: border-box;
}

.vs-specs-chip::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60%;
	height: 2px;
	background: #01488c;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
	pointer-events: none;
}

.vs-specs-chip.active {
	color: #01488c;
}

.vs-specs-chip.active::after {
	transform: translateX(-50%) scaleX(1);
}

.vs-specs-arrow {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 25px;
	background: #f3f4f6;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	color: #01488c;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity 0.2s, background 0.2s;
}

.vs-specs-arrow:hover:not(:disabled) {
	background: #e5e7eb;
}

.vs-specs-arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.vs-specs-arrow.vs-specs-arrow--hidden {
	visibility: hidden;
	pointer-events: none;
}

.vs-specs-card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding: 20px 16px;
	border: 1px solid #dbeafe;
	border-radius: 12px;
	background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.vs-specs-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-width: 0;
	position: relative;
	padding: 0 12px;
	text-align: center;
}

.vs-specs-label {
	font-size: 12px;
	color: #64748b;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.vs-specs-value {
	font-size: 14px;
	color: #0f172a;
	font-weight: 800;
	line-height: 1.4;
	word-break: break-word;
	text-align: center;
}

@media (min-width: 721px) {
	.vs-specs-col:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 66px;
		background: #e5e7eb;
		pointer-events: none;
	}
}

@media (max-width: 720px) {
	.vs-specs-card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 0;
	}

	.vs-specs-col {
		padding: 0 8px;
	}

	.vs-specs-col:not(:last-child)::after {
		display: none;
	}
}

/* ========================================
   eSIM Tabs - Layout blocks (Tab1/2/3)
======================================== */
.vs-tab-panel {
	max-width: 100%;
}

.vs-esim-section-title {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #101828;
	margin: 6px 0 12px 0;
}

.vs-check-list {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vs-check-list li {
	position: relative;
	padding-left: 34px;
	font-size: 14px;
	line-height: 1.6;
	color: #111827;
}

.vs-check-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: #DCFCE7;
	color: #22C55E;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Tab1 */
.vs-esim-detail {
	display: grid;
	gap: 18px;
}

.vs-esim-meta {
	display: grid;
	gap: 10px;
	font-size: 14px;
	color: #111827;
}

.vs-esim-meta-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.vs-esim-meta-label {
	font-weight: 600;
	color: #111827;
	flex: 0 0 auto;
}

.vs-esim-meta-value {
	color: #4A5565;
	font-weight: 400;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vs-notice-box {
	border: 1px solid #FBD38D;
	background: #FFFAF0;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.vs-notice-box--below-tabs {
	margin-top: 16px;
}

.vs-notice-head {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.vs-notice-title {
	font-weight: 900;
	color: #111827;
	font-size: 14px;
}

.vs-notice-icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vs-notice-text {
	font-size: 13px;
	line-height: 1.6;
	color: #4A5565;
}

/* 產品模板：YouTube + 描述（黃色背景），與套餐對比區同寬 */
.vs-product-template-extend {
    margin: 100px auto 20px;
    max-width: 1320px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 模板影片在「常見問題」上方：與上方區塊區隔（覆寫 extend 預設上下邊距） */
.vs-product-template-extend.vs-product-template-video-before-faq {
	margin: 60px auto 48px;
}

.vs-product-template-video-wrap {
	width: 100%;
	margin-bottom: 16px;
}

.vs-product-template-video-inner {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #0f172a;
}

.vs-product-template-video-inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 模板視頻封面：沿用 .vs-video-play-overlay / .vs-play-circle，鋪滿 16:9 容器 */
.vs-product-template-video-inner .vs-video-thumbnail.vs-product-template-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	cursor: pointer;
}

.vs-product-template-desc-box {
	margin-bottom: 0;
	margin-top: 60px;
}

.vs-product-template-desc-body {
	font-size: 13px;
	line-height: 1.65;
	color: #4a5565;
}

.vs-product-template-desc-body .vs-product-template-desc-inner,
.vs-product-template-desc-body .product-template {
	max-width: 100%;
}

/* 為什麼選擇我們（與套餐對比一覽同類邊框；位於套餐對比區下方） */
.vs-why-choose-us-section {
	margin: 40px auto 20px;
	max-width: 1320px;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
}

.vs-why-choose-us-section .vs-section-title {
	text-align: center;
	margin-bottom: 10px;
	color: #101828;
	font-size: 36px;
	font-weight: 800;
}

.vs-why-choose-us-subtitle {
	text-align: center;
	margin: 0 0 24px;
	padding: 0 0 20px;
	color: #4a5565;
	font-size: 18px;
	font-weight: 800;
}

.vs-why-choose-us-table-wrap {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.vs-why-choose-us-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
	background: #fff;
}

.vs-why-choose-us-table thead tr {
	background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}

.vs-why-choose-us-table th {
	padding: 15px 12px;
	font-weight: 800;
	color: var(--vs-secondary, #01488c);
	font-size: 16px;
	border-bottom: 2px solid #e5e7eb;
	text-align: center;
	vertical-align: middle;
	width: 33.333%;
}

.vs-why-choose-us-table .vs-wcu-th--djb,
.vs-why-choose-us-table .vs-wcu-th--c2c {
	font-size: 24px;
	font-weight: 800;
	text-align: center;
}

.vs-why-choose-us-table td {
	padding: 0 12px;
	font-size: 14px;
	color: var(--vs-text, #4b5563);
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
	text-align: center;
	width: 33.333%;
	height: 76px;
	box-sizing: border-box;
}

.vs-why-choose-us-table thead th {
	height: 76px;
	box-sizing: border-box;
}

.vs-why-choose-us-table tbody tr:last-child td {
	border-bottom: none;
}

.vs-why-choose-us-tr--stripe td {
	background: #e5e7eb3d;
}

.vs-why-choose-us-table .vs-wcu-td--djb,
.vs-why-choose-us-table .vs-wcu-td--c2c {
	text-align: center;
}

/* 第一欄：圖示固定欄寬，與文字分欄，避免置中時圖示隨字長錯位 */
.vs-why-choose-us-table .vs-wcu-td--feature {
	text-align: left;
	vertical-align: middle;
	padding-left: 150px;
}

.vs-wcu-feature-inner {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.vs-wcu-feature-icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
	justify-self: start;
}

.vs-wcu-feature-label {
	font-weight: 700;
	color: #111827;
	min-width: 0;
}

.vs-wcu-td--djb {
	font-weight: 600;
	color: #111827;
}

.vs-wcu-c2c-x {
	display: inline-block;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.vs-wcu-c2c-text {
	display: inline-block;
	max-width: 100%;
}

@media (max-width: 768px) {
	.vs-why-choose-us-section .vs-section-title {
		font-size: 26px;
	}

	.vs-why-choose-us-subtitle {
		font-size: 15px;
	}

	.vs-why-choose-us-table th {
		padding: 12px 8px;
	}

	.vs-why-choose-us-table td {
		padding: 0 8px;
		font-size: 13px;
		height: auto;
		min-height: 80px;
	}

	.vs-why-choose-us-table .vs-wcu-th--djb,
	.vs-why-choose-us-table .vs-wcu-th--c2c {
		font-size: 18px;
	}

	.vs-wcu-feature-inner {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 8px;
	}

	.vs-wcu-feature-icon {
		width: 32px;
		height: 32px;
	}
}

.vs-product-template-desc-body h1,
.vs-product-template-desc-body h2,
.vs-product-template-desc-body h3,
.vs-product-template-desc-body h4 {
	color: #101828;
	font-weight: 800;
	margin: 1em 0 0.5em;
}

.vs-product-template-desc-body h1:first-child,
.vs-product-template-desc-body h2:first-child,
.vs-product-template-desc-body h3:first-child {
	margin-top: 0;
}

.vs-product-template-desc-body p,
.vs-product-template-desc-body li {
	font-size: 13px;
	line-height: 1.65;
	color: #4a5565;
}

/* Tab2 */
.vs-coverage-box {
	border: 1px solid #BEE3F8;
	background: #EBF8FF;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 18px;
}

.vs-coverage-box-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	color: #101828;
	margin-bottom: 12px;
	font-size: 16px;
}

.vs-coverage-icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: url('../images/single/jianron.png') no-repeat center center;
	background-size: contain;
	color: transparent;
	font-size: 0;
}

.vs-network-partners {
	margin-top: 18px;
}

.vs-network-partners .vs-esim-section-title {
	margin-top: 0;
	margin-bottom: 12px;
}

.vs-carrier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 12px;
}

.vs-carrier-card {
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	text-align: center;
	min-height: 88px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vs-carrier-name {
	font-weight: 800;
	color: #111827;
	font-size: 14px;
	margin-bottom: 6px;
}

.vs-carrier-sub {
	font-size: 12px;
	color: #64748B;
}

/* Tab3 */
.vs-compat {
	text-align: center;
	padding: 18px 0;
	display: grid;
	justify-items: center;
	gap: 10px;
}

.vs-compat-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #0B3B8C;
	display: grid;
	place-items: center;
}

.vs-compat-icon svg {
	width: 24px;
	height: 24px;
	fill: #fff;
}

.vs-compat-title {
	font-size: 18px;
	font-weight: 900;
	color: #111827;
	margin-top: 6px;
}

.vs-compat-desc {
	font-size: 13px;
	color: #4A5565;
}

.vs-compat-btn {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background: #fff;
	color: #111827;
	font-weight: 800;
	text-decoration: none;
	min-width: 240px;
}

.vs-compat-btn-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	margin-left: 6px;
}

.vs-compat-btn:hover {
	border-color: #CBD5E0;
}

@media (max-width: 768px) {
	.vs-tabs-nav {
		gap: 18px;
		overflow-x: auto;
	}

	.vs-tab-btn {
		min-width: auto;
		height: 42px;
		padding: 0 8px;
		white-space: nowrap;
	}

	.vs-carrier-grid {
		grid-template-columns: 1fr;
	}

	.vs-product-rating {
		flex-direction: column;
		align-items: flex-start;
	}

	.vs-compat-inline-rating {
		width: 100%;
	}

	.vs-compat-open-btn.vs-compat-open-btn--inline {
		width: 100%;
		justify-content: center;
	}

	.vs-rating-meta {
		align-self: stretch;
		justify-content: flex-start;
	}
}

/* ========================================
   Compatibility Modal（ESIM 支援裝置 + 可選影片）
======================================== */
.vs-compat-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.vs-compat-modal.active {
	display: flex;
}

.vs-compat-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
}

.vs-compat-modal-dialog {
	position: relative;
	background: #FFFFFF;
	border-radius: 24px;
	box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
	width: 640px;
	max-width: calc(100% - 40px);
	max-height: 85vh;
	padding: 24px 24px 20px;
	display: flex;
	flex-direction: column;
}

.vs-compat-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.vs-compat-modal-header h3 {
	font-size: 18px;
	font-weight: 900;
	color: #000000;
	margin: 0;
}

.vs-compat-modal-close {
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #9CA3AF;
}

.vs-compat-modal-close:hover {
	color: #4B5563;
}

.vs-compat-modal-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vs-compat-video-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #0f172a;
}

.vs-compat-video-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vs-compat-tips {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vs-compat-tip-box {
	border: 1px solid #FDE68A;
	background: #FFFBEB;
	border-radius: 10px;
	padding: 12px 14px;
}

.vs-compat-tip-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #111827;
}

@media (max-width: 480px) {
	.vs-compat-modal-dialog {
		width: 100%;
		max-width: calc(100% - 24px);
		padding: 18px 18px 16px;
	}
}

.vs-tab-content {
	display: none;
}

.vs-tab-content.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Specifications Table */
.vs-specs-table {
	width: 100%;
	max-width: 600px;
	border-collapse: collapse;
}

.vs-specs-table tbody{
	border: 1px solid #DCDCDC;
}

.vs-specs-table tr {
	border-bottom: 1px solid var(--vs-border);
}

.vs-specs-table th,
.vs-specs-table td {
	padding: 14px 16px;
	text-align: left;
	font-size: 16px;
}

.vs-specs-table th {
	width: 180px;
	color: var(--vs-text);
	background: #F3F6FB;
    font-weight: 600;
}

.vs-specs-table td {
	color: var(--vs-text-light);
    font-weight: 600;
}

/* Description Tab */
.vs-product-description {
	font-size: 16px;
    line-height: 1.5;
    color: var(--vs-text);
}

.vs-product-description p {
	margin: 0 0 16px;
}

/* Testing Tab */
.vs-testing-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vs-testing-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--vs-border);
}

.vs-testing-item:first-child {
	padding-top: 0;
}

.vs-testing-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}

.vs-testing-icon svg {
	stroke: var(--vs-white);
}

/* Different icon colors for each testing item */
.vs-testing-icon-flavors {
	background: #FFAA01;
}

.vs-testing-icon-functionality {
	background: #FFAA01;
}

.vs-testing-icon-battery {
	background: #FFD700;
}

.vs-testing-icon-value {
	background: #FF6B6B;
}

.vs-testing-content h4 {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--vs-secondary);
	margin: 0 0 4px;
}

.vs-testing-content p {
	font-size: 13px;
	color: var(--vs-text-light);
	margin: 0;
	line-height: 1.6;
}

.vs-testing-icon::before{
	width: 18px;
	height: 18px;
	z-index: 2;
	top: 0;
	left: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	content: '';
	position: absolute;
}

.vs-testing-icon-flavors::before{
	background: url('../icons/flavors.svg') no-repeat center center;
	background-size: contain;
}
.vs-testing-icon-functionality::before{
	background: url('../icons/functionality.svg') no-repeat center center;
	background-size: contain;
}

.vs-testing-icon-battery::before{
	background: url('../icons/battery.svg') no-repeat center center;
	background-size: contain;
}
.vs-testing-icon-value::before{
	background: url('../icons/value.svg') no-repeat center center;
	background-size: contain;
}

/* ========================================
   Reviews Section
======================================== */

.vs-reviews-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--vs-border);
}

.vs-reviews-summary {
	display: flex;
	align-items: center;
	gap: 16px;
}

.vs-reviews-score {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 48px;
	font-weight: 900;
	color: var(--vs-secondary);
}

.vs-reviews-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

.vs-reviews-stars svg {
	width: 18px;
	height: 18px;
	fill: var(--vs-primary);
}

.vs-reviews-count {
	font-size: 14px;
	color: var(--vs-text-muted);
}

.vs-btn-write-review {
	display: inline-block;
    padding: 16px;
    background: var(--vs-primary);
    border: none;
    border-radius: 5px;
    font-family: 'AvenirLTStd-Heavy', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--vs-white);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    width: 228px;
    text-align: center;
}

.vs-btn-write-review:hover {
	background: var(--vs-primary-hover);
	color: var(--vs-white);
}

/* Reviews List */
.vs-reviews-list {
	margin-bottom: 40px;
}

/* Review Item */
.vs-review-item {
	padding: 24px 0;
	border-bottom: 1px solid var(--vs-border);
}

.vs-review-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 12px;
}

.vs-reviewer-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--vs-bg);
}

.vs-reviewer-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-review-images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.vs-review-image-item {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	background: var(--vs-bg);
}

.vs-review-image-item:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vs-review-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-reviewer-info {
	flex: 1;
}

.vs-reviewer-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--vs-secondary);
	margin: 0 0 4px;
}

.vs-verified-badge {
	font-weight: 400;
	color: var(--vs-primary);
	font-size: 16px;
	margin-left: 4px;
}

.vs-review-date {
	font-size: 14px;
	color: var(--vs-text-muted);
}

.vs-review-rating {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.vs-review-rating svg {
	width: 14px;
	height: 14px;
}

.vs-review-content {
	font-size: 16px;
	line-height: 1.5;
	color: var(--vs-text-light);
	margin-bottom: 12px;
}

/* Review Image Lightbox */
.vs-review-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.vs-review-lightbox.active {
	opacity: 1;
	visibility: visible;
}

.vs-review-lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(5px);
}

.vs-review-lightbox-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-review-lightbox-image {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.vs-review-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	font-size: 32px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-review-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.vs-review-lightbox-prev,
.vs-review-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	font-size: 32px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-review-lightbox-prev {
	left: -60px;
}

.vs-review-lightbox-next {
	right: -60px;
}

.vs-review-lightbox-prev:hover,
.vs-review-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
	.vs-review-lightbox-prev,
	.vs-review-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
	
	.vs-review-lightbox-prev {
		left: 10px;
	}
	
	.vs-review-lightbox-next {
		right: 10px;
	}
	
	.vs-review-lightbox-close {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		font-size: 28px;
	}
}

/* ========================================
   Related Products
======================================== */

.vs-related-section {
	margin-bottom: 60px;
}

.vs-products-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.vs-no-products {
	text-align: center;
	color: var(--vs-text-muted);
	padding: 40px;
}

/* ========================================
   WooCommerce Overrides
======================================== */

.woocommerce-product-gallery,
.woocommerce-product-details__short-description {
	display: none;
}

.cart {
	margin: 0;
	width: 100%;
}

/* ========================================
   Review Form Styles
======================================== */
#review_form_wrapper .comment-reply-title {
    font-family: 'AvenirLTStd-Black', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--vs-secondary);
    margin-bottom: 18px;
    display: block;
    line-height: 1;
}

#review_form_wrapper label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--vs-text);
	margin-bottom: 10px;
}

#review_form_wrapper label .required {
	color: #e74c3c;
	margin-left: 2px;
}

#review_form_wrapper label .optional {
	font-weight: 400;
	color: var(--vs-text-muted);
	font-size: 12px;
}

#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid var(--vs-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: var(--vs-text);
	background: #fff;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

#review_form_wrapper input[type="text"]:focus,
#review_form_wrapper input[type="email"]:focus,
#review_form_wrapper textarea:focus {
	outline: none;
	border-color: var(--vs-primary);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

#review_form_wrapper textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

/* Rating Stars */
.comment-form-rating {
	margin-bottom: 24px;
}

.vs-rating-stars-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.vs-rating-stars-wrapper .stars {
	display: none;
}

.vs-rating-stars {
	display: flex;
	gap: 4px;
	cursor: pointer;
}

.vs-rating-stars .vs-star {
	width: 32px;
	height: 32px;
	color: #ddd;
	transition: all 0.2s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-rating-stars .vs-star:hover,
.vs-rating-stars .vs-star.active {
	color: #FFAA01;
	transform: scale(1.1);
}

.vs-rating-stars .vs-star svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	stroke: currentColor;
}

.vs-rating-text {
	font-size: 14px;
	color: var(--vs-text-muted);
	font-weight: 500;
}

/* Image Upload */
.comment-form-images {
	margin-bottom: 10px;
}

.vs-image-upload-wrapper {
	position: relative;
}

.vs-image-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: #f8f9fa;
	border: 2px dashed var(--vs-border);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 600;
	color: var(--vs-text);
	margin-bottom: 8px;
}

.vs-image-upload-btn:hover {
	background: #e9ecef;
	border-color: var(--vs-primary);
	color: var(--vs-primary);
}

.vs-image-upload-btn svg {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}

.vs-image-upload-wrapper input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}

.comment-images-hint {
	display: block;
	font-size: 12px;
	color: var(--vs-text-muted);
	margin-top: 4px;
}

.comment-images-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.comment-image-preview-item {
	position: relative;
	width: 100px;
	height: 100px;
	border: 2px solid var(--vs-border);
	border-radius: 8px;
	overflow: hidden;
	background: #f8f9fa;
	transition: all 0.2s ease;
}

.comment-image-preview-item:hover {
	border-color: var(--vs-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.comment-image-preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.comment-image-preview-item .remove-image {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: all 0.2s ease;
}

.comment-image-preview-item .remove-image:hover {
	background: #e74c3c;
	transform: scale(1.1);
}

/* Submit Button */
#review_form_wrapper input[type="submit"] {
	background: var(--vs-primary);
	color: var(--vs-white);
	border: none;
	padding: 16px 40px;
	border-radius: 8px;
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-top: 8px;
}

#review_form_wrapper input[type="submit"]:hover {
	background: var(--vs-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#review_form_wrapper input[type="submit"]:active {
	transform: translateY(0);
}

/* Form Fields Layout */
#review_form_wrapper .comment-form-author,
#review_form_wrapper .comment-form-email {
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	#review_form_wrapper {
		padding: 24px 20px;
	}
	
	.vs-rating-stars .vs-star {
		width: 28px;
		height: 28px;
	}
	
	.vs-image-upload-btn {
		padding: 10px 20px;
		font-size: 13px;
	}
	
	#review_form_wrapper input[type="submit"] {
		width: 100%;
		padding: 14px 32px;
	}
}

/* ========================================
   Product Card Styles (in grid)
======================================== */

.vs-products-grid .vs-product-card {
	position: relative;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.vs-products-grid .vs-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.vs-products-grid .vs-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	background: #FF6B6B;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	z-index: 1;
	text-transform: uppercase;
}

.vs-products-grid .vs-card-image {
	position: relative;
	padding-top: 100%;
	background: #F8F8F8;
	overflow: hidden;
}

.vs-products-grid .vs-card-image img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.vs-products-grid .vs-product-card:hover .vs-card-image img {
	transform: translate(-50%, -50%) scale(1.05);
}

.vs-products-grid .vs-card-content {
	padding: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.vs-products-grid .vs-card-brand {
	font-size: 11px;
	margin-bottom: 6px;
}

.vs-products-grid .vs-card-brand-from {
	color: #999;
}

.vs-products-grid .vs-card-brand-name {
	color: #FF6B6B;
	font-weight: 700;
}

.vs-products-grid .vs-card-title {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin: 0 0 8px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 40px;
}

.vs-products-grid .vs-card-price {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.vs-products-grid .vs-card-price-original {
	font-size: 13px;
	color: #999;
	text-decoration: line-through;
}

.vs-products-grid .vs-card-price-current {
	font-size: 17px;
	font-weight: 700;
	color: #333;
}

/* ========================================
   Responsive
======================================== */

@media (max-width: 1200px) {
	.vs-product-main {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	
	.vs-gallery-main {
		width: 85%;
	}
	
	.vs-gallery-thumbs {
		width: 75%;
	}
	
	.vs-products-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 992px) {
	.vs-product-main {
		grid-template-columns: 1fr;
	}
	
	.vs-gallery-main {
		width: 100%;
	}
	
	.vs-gallery-thumbs {
		width: 100%;
	}
	
	.vs-product-gallery {
		position: static;
	}
	
	.vs-product-summary {
		position: static;
		max-width: 100%;
	}
	
	.vs-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.vs-tabs-nav {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		gap: 18px;
	}
	
	.vs-tab-btn {
		white-space: nowrap;
		padding: 10px 0;
	}
}

@media (max-width: 768px) {
	.vs-product-container {
		padding: 15px;
		padding-top: 0;
	}
	
	.vs-product-title {
		font-size: 22px;
	}
	
	.vs-price-current {
		font-size: 26px;
	}
	
	.vs-gallery-main {
		height: 350px;
	}
	
	.vs-gallery-thumb {
		width: 70px;
		height: 70px;
	}
	
	.vs-products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.vs-reviews-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	
	.vs-specs-table th {
		width: 120px;
	}
	
	.vs-features-grid {
		grid-template-columns: 1fr;
	}

	.vs-gallery-thumbs{
		display: flex;
		flex-direction: row;
	}
}

@media (max-width: 480px) {
	.vs-products-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	
	.vs-add-to-cart {
		flex-direction: column;
	}
	
	.vs-quantity {
		justify-content: center;
	}
	
	.vs-product-actions {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}
}


/* ========================================
   TM EPO Plugin Styles Override - 適配主題風格
======================================== */

/* TM EPO 容器 */
.tc-extra-product-options {
	margin: 20px 0;
	padding: 0;
	width: 100%;
}

/* 隐藏空的 TM EPO 容器 */
.tc-extra-product-options:empty {
	display: none !important;
	margin: 0;
}

.tc-extra-product-options .tc-epo-element-product-container {
	margin-bottom: 16px;
}

/* 選項標題 */
.tc-extra-product-options .tc-epo-label,
.tc-extra-product-options .tm-epo-field-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--vs-text);
	margin-bottom: 8px;
	display: block;
}

/* 必填標記 */
.tc-extra-product-options .tm-epo-required {
	color: #e74c3c;
	margin-left: 2px;
}

/* 下拉選擇框 */
.tc-extra-product-options select,
.tc-extra-product-options .tm-epo-field select {
	width: 100%;
	max-width: 320px;
	padding: 12px 40px 12px 14px;
	font-size: 14px;
	color: var(--vs-text);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.tc-extra-product-options select:hover,
.tc-extra-product-options .tm-epo-field select:hover {
	border-color: var(--vs-primary);
}

.tc-extra-product-options select:focus,
.tc-extra-product-options .tm-epo-field select:focus {
	outline: none;
	border-color: var(--vs-primary);
	box-shadow: 0 0 0 3px rgba(255, 170, 1, 0.15);
}

/* 單選按鈕組 */
.tc-extra-product-options .tm-epo-field-radiobutton,
.tc-extra-product-options .tmcp-field-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tc-extra-product-options .tmcp-field-wrap label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #f8f9fa;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
}

.tc-extra-product-options .tmcp-field-wrap label:hover {
	border-color: var(--vs-primary);
	background: #fff;
}

.tc-extra-product-options .tmcp-field-wrap input[type="radio"]:checked + label,
.tc-extra-product-options .tmcp-field-wrap label.tc-active {
	border-color: var(--vs-primary);
	background: rgba(255, 170, 1, 0.1);
	color: var(--vs-text);
}

/* 日期選擇器 */
.tc-extra-product-options input[type="date"],
.tc-extra-product-options .tm-epo-field input[type="text"].tm-epo-datepicker {
	width: 100%;
	max-width: 200px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--vs-text);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.tc-extra-product-options input[type="date"]:hover,
.tc-extra-product-options .tm-epo-field input[type="text"].tm-epo-datepicker:hover {
	border-color: var(--vs-primary);
}

.tc-extra-product-options input[type="date"]:focus,
.tc-extra-product-options .tm-epo-field input[type="text"].tm-epo-datepicker:focus {
	outline: none;
	border-color: var(--vs-primary);
	box-shadow: 0 0 0 3px rgba(255, 170, 1, 0.15);
}

/* 複選框 */
.tc-extra-product-options input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--vs-primary);
}

/* ========================================
   TM EPO 價格總計框 - 隱藏原始樣式，只顯示 Options amount
======================================== */

/* 隱藏整個 TM EPO 價格總計區塊（包括標籤文字） */
.tc-extra-product-options .tc-totals-form,
.tc-extra-product-options .tm-epo-totals,
.tc-totals-form,
.tm-epo-totals,
.tc-epo-totals,
.tm-epo-final-totals,
.tc-final-totals {
	position: absolute !important;
	left: -9999px !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* 隱藏原始產品價格區塊（當有 TM EPO 時，僅變體產品） */
.vs-product-container.variable .vs-product-summary > .vs-product-price:not(.vs-epo-price-container) {
	display: none !important;
}

/* 簡單產品：隱藏單獨價格區塊，價格僅在小計行顯示（避免與小計重複） */
.vs-product-container:not(.variable) .vs-product-summary > .vs-product-price {
	display: none !important;
}

/* Options amount 價格容器 */
.vs-epo-price-container {
	margin: 15px 0 20px 0;
}

/* Options amount 價格樣式 - 使用 vs-price-current 樣式 */
.vs-epo-options-price {
	font-size: 28px;
	font-weight: 700;
	color: var(--vs-primary);
	display: block;
}

.vs-epo-options-price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.vs-epo-options-price .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
}

/* 選項價格顯示 */
.tc-extra-product-options .tc-price,
.tc-extra-product-options .price {
	color: var(--vs-primary);
	font-weight: 600;
}

/* 選項描述 */
.tc-extra-product-options .tc-epo-element-description {
	font-size: 12px;
	color: var(--vs-text-muted);
	margin-top: 4px;
}

/* 響應式 */
@media (max-width: 768px) {
	.tc-extra-product-options select,
	.tc-extra-product-options .tm-epo-field select {
		max-width: 100%;
	}
	
	.tc-extra-product-options .tmcp-field-wrap {
		flex-direction: column;
	}
	
	.tc-extra-product-options .tmcp-field-wrap label {
		width: 100%;
		justify-content: flex-start;
	}
	
	.vs-epo-options-price {
		font-size: 24px;
	}
}

/* ========================================
   Product Description - 優化視覺樣式
======================================== */

.vs-product-desc {
	margin: 20px 0;
	padding: 0;
}

/* 產品簡短描述：每個 span 獨立一行 */
.vs-product-desc span {
	display: block;
	margin-bottom: 5px;
}

.vs-desc-content {
	font-size: 16px;
	line-height: 1.8;
	color: var(--vs-text-light);
}

.vs-desc-content p {
	margin: 0 0 12px 0;
}

.vs-desc-content p:last-child {
	margin-bottom: 0;
}

.vs-desc-subtitle {
	font-size: 14px;
	font-weight: 600;
	color: var(--vs-text);
	margin: 16px 0 8px 0 !important;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--vs-primary);
	display: inline-block;
}

.vs-desc-content .vs-highlight {
	color: var(--vs-primary);
	font-weight: 600;
	background: linear-gradient(to bottom, transparent 60%, rgba(255, 170, 1, 0.2) 60%);
	padding: 0 2px;
}

.vs-desc-content .vs-emphasis {
	color: var(--vs-text);
	font-style: normal;
	background: #f5f5f5;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13px;
}

.vs-desc-list {
	margin: 12px 0;
	padding-left: 0;
	list-style: none;
}

.vs-desc-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	line-height: 1.6;
}

.vs-desc-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	background: var(--vs-primary);
	border-radius: 50%;
}

ol.vs-desc-list {
	counter-reset: list-counter;
}

ol.vs-desc-list li {
	counter-increment: list-counter;
}

ol.vs-desc-list li::before {
	content: counter(list-counter);
	width: 18px;
	height: 18px;
	background: var(--vs-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 3px;
}


/* ========================================
   标题分享和评分响应式样式
======================================== */
@media (max-width: 768px) {
	.vs-title-share-wrapper {
		flex-direction: column;
		gap: 12px;
	}
	
	.vs-product-title {
		font-size: 22px;
	}
	
	.vs-title-share-wrapper .vs-social-share {
		margin-top: 0;
	}
	
	.vs-title-share-wrapper .vs-social-icon {
		width: 32px;
		height: 32px;
	}
	
	.vs-rating-wrapper {
		padding: 6px 12px;
		gap: 10px;
	}
	
	.vs-rating-score {
		font-size: 20px;
	}
	
	.vs-star-wrapper {
		width: 16px;
		height: 16px;
	}
	
	.vs-star-empty,
	.vs-star-filled {
		width: 16px;
		height: 16px;
	}
	
	.vs-review-count {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.vs-product-title {
		font-size: 19px;
	}
	
	.vs-title-share-wrapper .vs-social-icon {
		width: 30px;
		height: 30px;
	}
	
	.vs-rating-score {
		font-size: 18px;
	}
	
	.vs-star-wrapper {
		width: 14px;
		height: 14px;
	}
	
	.vs-star-empty,
	.vs-star-filled {
		width: 14px;
		height: 14px;
	}
}

/* ========================================
   套餐對比一覽樣式
======================================== */

.vs-package-comparison-content {
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

.vs-package-comparison-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.vs-package-comparison-content table thead {
	background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
}

.vs-package-comparison-content table th {
	padding: 14px 16px;
	text-align: left;
	font-weight: 800;
	color: #111827;
	border-bottom: 2px solid #E5E7EB;
	font-size: 14px;
}

.vs-package-comparison-content table td {
	padding: 12px 16px;
	border-bottom: 1px solid #F3F4F6;
	color: #4B5563;
}

.vs-package-comparison-content table tbody tr:hover {
	background: #F9FAFB;
}

.vs-package-comparison-content table tbody tr:last-child td {
	border-bottom: none;
}

/* 套餐名稱列 */
.vs-package-comparison-content table td:first-child {
	font-weight: 700;
	color: #111827;
}

/* 價格列樣式 */
.vs-package-comparison-content table td:nth-child(4) {
	font-weight: 800;
	color: var(--vs-primary);
	font-size: 15px;
}

/* 推薦標籤樣式 */
.vs-package-comparison-content .badge-hot {
	display: inline-block;
	padding: 2px 8px;
	background: #EF4444;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	border-radius: 4px;
	margin-left: 6px;
	vertical-align: middle;
}

.dabge-taocan{
	margin-bottom: 16px;
    color: #4A5565;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    padding: 10px 0px 20px 0px;
}

.vs-package-comparison-content .badge-new {
	display: inline-block;
	padding: 2px 8px;
	background: #10B981;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	border-radius: 4px;
	margin-left: 6px;
	vertical-align: middle;
}

/* 響應式設計 */
@media (max-width: 768px) {
	.vs-package-comparison-content table {
		font-size: 13px;
	}
	
	.vs-package-comparison-content table th,
	.vs-package-comparison-content table td {
		padding: 10px 12px;
	}
}

/* ========================================
   套餐對比一覽 Section
======================================== */

.vs-package-comparison-section {
	margin: 60px auto;
	max-width: 1040px;
	padding: 0 20px;
}

.vs-package-comparison-section .vs-section-title {
	text-align: center;
	margin-bottom: 10px;
	color: #101828;
	font-family: 'Inter', sans-serif;
	font-size: 36px;
	font-weight: 800 !important;
}

.vs-package-comparison-content {
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* 套餐對比表格樣式 */
.vs-package-comparison-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: var(--vs-white);
	border: none;
}

.vs-package-comparison-content table th,
.vs-package-comparison-content table td {
	padding: 15px;
	text-align: left;
	border: none;
	border-bottom: 1px solid #F3F4F6;
}

.vs-package-comparison-content table thead tr {
	background: linear-gradient(135deg, #F9FAFB 0%, #EFF6FF 100%);
}

.vs-package-comparison-content table th {
	background: transparent !important;
	font-weight: 800;
	color: var(--vs-secondary);
	font-size: 16px;
}

.vs-package-comparison-content table td {
	font-size: 14px;
	color: var(--vs-text);
}

.vs-package-comparison-content table tbody tr:last-child td {
	border-bottom: none;
}

/* 最低價列的顏色 */
.vs-package-comparison-content table td:nth-child(4) {
	color: #01488C;
	font-weight: 600;
}

/* 最高價列的顏色（與最低價相同） */
.vs-package-comparison-content table td:nth-child(5) {
	color: #01488C;
	font-weight: 600;
}

/* 推薦行樣式 */
.vs-package-comparison-content table tbody tr.vs-recommended-row {
	background: #f0f7ff8a;
}

.vs-package-comparison-content table tbody tr.vs-recommended-row:hover {
	background: #E0EFFF;
}

/* eSIM 手機支援協議樣式 */
.vs-esim-agreement-wrapper {
    margin: 20px 0;
    padding: 8px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
}

.vs-esim-agreement-wrapper.is-required {
    border-left: 4px solid #01488C;
}

.vs-esim-agreement-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer;
    margin: 0 !important;
}

.vs-esim-agreement-label input[type="checkbox"] {
    margin-top: 4px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
}

.vs-agreement-text {
    font-size: 14px;
    line-height: 2;
    color: #374151;
    user-select: none;
}

/* eSIM 協議未勾選時的紅色提示 */
.vs-esim-agreement-warning {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 0;
    transition: opacity 0.2s ease;
}
.vs-esim-agreement-warning:empty,
.vs-esim-agreement-warning:not(.is-visible) {
    display: none;
}
.vs-esim-agreement-warning.is-visible {
    display: block;
    color: #DC2626;
    font-weight: 500;
}

/* 禁用按鈕樣式 */
.vs-btn-add-cart.disabled,
.vs-btn-buy-now.disabled,
.single_add_to_cart_button.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
}

/* 抖動動畫（未勾選提示） */
@keyframes vs-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.shake-animation {
    animation: vs-shake 0.2s ease-in-out 0s 2;
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
}

/* 標籤樣式（推薦、性價比高、最新等） */
.vs-package-comparison-content table td span[style*="background"],
.vs-package-comparison-content table td .badge,
.vs-package-comparison-content table td [class*="badge"],
.vs-package-comparison-content table td [class*="tag"] {
	background: #FF4D4F !important;
	color: white !important;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
}

.vs-package-comparison-content table tbody tr:hover {
	background: #F8F9FA;
}

/* 響應式設計 */
@media (max-width: 768px) {
	.vs-package-comparison-section {
		margin: 40px auto;
		padding: 0 15px;
	}
	
	.vs-package-comparison-content {
		padding: 0;
		overflow-x: auto;
	}
	
	.vs-package-comparison-content table {
		min-width: 600px;
	}
	
	.vs-package-comparison-content table th,
	.vs-package-comparison-content table td {
		padding: 10px 8px;
		font-size: 13px;
	}
}

/* ========================================
   DRO 技術（產品模板）
======================================== */

.vs-dro-tech-section {
	margin: 36px auto 0;
	max-width: 1320px;
	padding: 0 20px;
}

.vs-dro-tech-inner {
	background: #eff6ff;
	border: 1px solid #dbeafe;
	border-radius: 18px;
	padding: 32px 28px;
	text-align: center;
}

/* 與「如何安裝和使用 eSIM」主標題一致 */
.vs-dro-tech-section .vs-section-title,
.vs-esim-policies-section .vs-section-title {
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 36px;
	font-weight: 800 !important;
	color: var(--vs-secondary);
	margin-bottom: 10px;
	line-height: 1.2;
}

.vs-esim-policies-section .vs-section-title {
	margin-bottom: 35px;
}

.vs-dro-tech-body {
	font-size: 15px;
	line-height: 1.75;
	color: #475569;
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.vs-dro-tech-body p {
	margin: 0 0 12px;
}

.vs-dro-tech-body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.vs-dro-tech-inner {
		padding: 24px 18px;
		border-radius: 14px;
	}

	.vs-dro-tech-section .vs-section-title,
	.vs-esim-policies-section .vs-section-title {
		font-size: 24px;
	}

	.vs-dro-tech-body {
		font-size: 14px;
	}
}

/* ========================================
   如何安裝和使用 eSIM Section
======================================== */

.vs-esim-installation-guide {
	margin: 60px auto;
	max-width: 1320px;
	padding: 40px 20px;
	background: var(--vs-white);
}

.vs-esim-installation-guide .vs-section-title {
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 36px;
	font-weight: 800 !important;
	color: var(--vs-secondary);
	margin-bottom: 10px;
}

.vs-guide-subtitle {
	text-align: center;
	font-size: 18px;
	font-weight: 800;
	color: #4A5565;
	margin-bottom: 16px;
	padding-bottom: 10px 0px 20px 0px;
}

.vs-installation-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.vs-step-card {
	width: 304px;
	/* height: 272px; */
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	border-radius: 12px;
	padding: 30px 20px;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vs-step-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);
}

.vs-step-icon-wrapper {
	position: relative;
	width: 66px;
	height: 66px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-step-icon {
	width: 66px;
	height: 66px;
	object-fit: contain;
}

.vs-step-number {
	position: absolute;
    top: -5px;
    right: -31px;
    width: 29px;
    height: 29px;
    background: #FFAA01;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.vs-step-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--vs-secondary);
	margin-bottom: 10px;
}

.vs-step-description {
	font-size: 14px;
	color: var(--vs-text-light);
	margin-bottom: 15px;
	line-height: 1.5;
}

.vs-step-list {
	list-style: none;
	padding: 0;
	margin: 0;
	justify-items: center;
	width: 100%;
}

.vs-step-list li {
	font-size: 13px;
	color: var(--vs-text);
	padding: 6px 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.vs-step-list li::before {
	content: "\2022";
	color: #01488C;
	font-weight: bold;
	font-size: 16px;
	flex-shrink: 0;
}

.vs-step-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.vs-step-arrow img {
	width: 32px;
    height: 32px;
    position: absolute;
    margin-right: 28px;
}

/* 響應式設計 */
@media (max-width: 1024px) {
	.vs-installation-steps {
		flex-wrap: wrap;
		gap: 30px;
	}
	
	.vs-step-card {
		width: 304px;
	}
	
	.vs-step-arrow {
		display: none;
	}
}

@media (max-width: 768px) {
	.vs-esim-installation-guide {
		margin: 40px auto;
		padding: 30px 15px;
	}
	
	.vs-esim-installation-guide .vs-section-title {
		font-size: 24px;
	}
	
	.vs-guide-subtitle {
		font-size: 16px;
		margin-bottom: 30px;
	}
	
	.vs-installation-steps {
		flex-direction: column;
		gap: 20px;
	}
	
	.vs-step-card {
		width: 100%;
		height: auto;
		min-height: 272px;
	}
	
	.vs-step-icon-wrapper {
		width: 66px;
		height: 66px;
	}
	
	.vs-step-icon {
		width: 66px;
		height: 66px;
	}
	
	.vs-step-number {
		width: 24px;
		height: 24px;
		font-size: 12px;
	}
}

/* ========================================
   注意事項與退換貨政策（產品模板）
======================================== */

.vs-esim-policies-section {
	margin: 48px auto 0;
	max-width: 1320px;
	padding: 0 20px 20px;
}

.vs-esim-policy-block {
	margin-bottom: 36px;
}

.vs-esim-policy-block:last-child {
	margin-bottom: 0;
}

.vs-esim-policy-box {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 20px 50px;
}

/* 圖示路徑（相對於本 CSS 檔），避免內聯 url 變數失效 */
.vs-esim-policy-box--precautions {
	--vs-policy-icon: url('../images/single/zhuyi.png');
}

.vs-esim-policy-box--returns {
	--vs-policy-icon: url('../images/single/tuihuan.png');
}

.vs-esim-policy-inner {
	font-size: 15px;
	line-height: 1.65;
	color: #111827;
}

.vs-esim-policy-inner ul,
.vs-esim-policy-inner ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vs-esim-policy-inner li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
}

.vs-esim-policy-inner li:last-child {
	margin-bottom: 0;
}

.vs-esim-policy-inner li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 24px;
	height: 24px;
	background: var(--vs-policy-icon) center / contain no-repeat;
}

/* 後台若以「段落」輸入（非清單），同樣顯示左側圖示 */
.vs-esim-policy-inner > p {
	position: relative;
	padding-left: 36px;
	margin: 0 0 14px;
	min-height: 24px;
}

.vs-esim-policy-inner > p:last-child {
	margin-bottom: 0;
}

.vs-esim-policy-inner > p::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 24px;
	height: 24px;
	background: var(--vs-policy-icon) center / contain no-repeat;
}

@media (max-width: 768px) {
	.vs-esim-policies-section {
		margin-top: 36px;
		padding: 0 15px 16px;
	}

	.vs-esim-policy-box {
		padding: 16px 14px;
	}

	.vs-esim-policy-inner {
		font-size: 14px;
	}

	.vs-esim-policy-inner li {
		padding-left: 32px;
	}

	.vs-esim-policy-inner li::before {
		width: 22px;
		height: 22px;
	}

	.vs-esim-policy-inner > p {
		padding-left: 32px;
	}

	.vs-esim-policy-inner > p::before {
		width: 22px;
		height: 22px;
	}
}

/* ========================================
   觀看安裝視頻 Section
======================================== */

.vs-video-tutorial-section {
	margin: 60px auto;
	max-width: 1320px;
	padding: 0 20px;
}

.vs-video-tutorial-container {
	background: #F9FAFB;
	border-radius: 20px;
	padding: 40px 40px 40px 60px;
	display: flex;
	align-items: center;
	gap: 60px;
}

.vs-video-tutorial-left {
	flex: 1;
	max-width: 500px;
}

.vs-video-badge {
	display: inline-block;
	background: #3B82F6;
	color: white;
	font-size: 14px;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.vs-video-title {
	font-size: 32px;
	font-weight: 800;
	color: #101828;
	margin-bottom: 15px;
	line-height: 1.3;
}

.vs-video-description {
	font-size: 16px;
	color: var(--vs-text-light);
	line-height: 1.6;
	margin-bottom: 30px;
}

.vs-video-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
}

.vs-video-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 3px 0;
	font-size: 15px;
	color: var(--vs-text);
}

.vs-feature-icon {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	background: #DCFCE7;
	border-radius: 50%;
	padding: 4.5px;
	box-sizing: border-box;
}

.vs-video-play-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #01488C;
	color: white;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 28px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.vs-video-play-btn:hover {
	background: #013A73;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.3);
}

.vs-video-play-btn .vs-play-icon {
	width: 16px;
	height: 16px;
}

.vs-video-tutorial-right {
	flex: 1;
	max-width: 693px;
}

.vs-video-thumbnail {
	position: relative;
	width: 693px;
	height: 332px;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.vs-video-thumbnail:hover {
	transform: scale(1.02);
}

.vs-thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.vs-video-thumbnail:hover .vs-video-play-overlay {
	background: rgba(0, 0, 0, 0.5);
}

.vs-play-circle {
	width: 80px;
	height: 80px;
	background: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.vs-video-thumbnail:hover .vs-play-circle {
	transform: scale(1.1);
}

.vs-play-icon-large {
	width: 32px;
	height: 32px;
}

/* 視頻彈窗 */
.vs-video-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-video-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.vs-video-modal-content {
	position: relative;
	width: 90%;
	max-width: 1200px;
	z-index: 10000;
}

.vs-video-modal-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: transparent;
	border: none;
	color: white;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.vs-video-modal-close:hover {
	transform: scale(1.2);
}

.vs-video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	background: #000;
	border-radius: 8px;
}

.vs-video-wrapper iframe,
.vs-video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 響應式設計 */
@media (max-width: 1024px) {
	.vs-video-tutorial-container {
		flex-direction: column;
		padding: 40px;
		gap: 40px;
	}
	
	.vs-video-tutorial-left,
	.vs-video-tutorial-right {
		max-width: 100%;
	}
	
	.vs-video-thumbnail {
		width: 100%;
		height: auto;
		aspect-ratio: 693 / 332;
	}
}

@media (max-width: 768px) {
	.vs-video-tutorial-section {
		margin: 40px auto;
		padding: 0 15px;
	}
	
	.vs-video-tutorial-container {
		padding: 30px 20px;
		gap: 30px;
	}
	
	.vs-video-title {
		font-size: 24px;
	}
	
	.vs-video-description {
		font-size: 14px;
	}
	
	.vs-video-features li {
		font-size: 14px;
	}
	
	.vs-video-play-btn {
		width: 100%;
		justify-content: center;
	}
	
	.vs-play-circle {
		width: 60px;
		height: 60px;
	}
	
	.vs-play-icon-large {
		width: 24px;
		height: 24px;
	}
	
	.vs-video-modal-content {
		width: 95%;
	}
	
	.vs-video-modal-close {
		top: -35px;
		font-size: 30px;
	}
}

/* ========================================
   常見問題 FAQ (從首頁複製)
======================================== */
.home-faq {
	margin-top: 60px;
	background: #ffffff;
	padding: 60px 0;
}

.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: 32px;
	font-weight: 900;
	color: #101828;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.faq-subtitle {
	font-size: 15px;
	color: #888;
	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: 1px solid #ddd;
	background: #ffffff;
	color: #333;
	font-size: 14px;
	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: 15px;
	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;
	}
}


/* ========================================
   用戶評價模塊
   ======================================== */
.vs-user-reviews-section {
	max-width: 1280px;
	margin: 60px auto;
	padding: 40px;
	background: rgba(190, 219, 255, 0.2); /* #BEDBFF33 */
	border-radius: 20px;
}

.vs-user-reviews-section .vs-section-title {
	margin-bottom: 32px;
	text-align: left;
}

.vs-user-reviews-header {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 40px;
}

.vs-reviews-rating-left {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-reviews-score {
	font-family: 'Inter', sans-serif;
	font-size: 48px;
	font-weight: 900;
	font-style: normal;
	color: #01488C;
	line-height: 48.0193px;
	letter-spacing: 0.211px;
	vertical-align: middle;
}

.vs-reviews-rating-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.vs-reviews-stars {
	display: flex;
	gap: 4px;
}

.vs-reviews-stars .vs-star-wrapper {
	position: relative;
	width: 32px;
	height: 32px;
}

.vs-reviews-stars .vs-star-empty,
.vs-reviews-stars .vs-star-filled {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.vs-reviews-stars .vs-star-empty {
	fill: #E5E7EB;
}

.vs-reviews-stars .vs-star-filled {
	fill: #10B981;
}

.vs-reviews-count-text {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #4A5565;
	line-height: 1.4;
}

.vs-user-reviews-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.vs-review-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s, box-shadow 0.2s;
}

.vs-review-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.vs-review-author-info {
	display: flex;
	gap: 12px;
}

.vs-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
}

.vs-review-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-review-author-details {
	flex: 1;
}

.vs-review-author-name {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #1F2937;
	margin-bottom: 4px;
}

.vs-review-date {
	font-size: 12px;
	color: #9CA3AF;
}

.vs-review-verified {
	display: inline-block;
	padding: 2px 8px;
	background: #10B981;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
}

.vs-review-rating {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	position: relative;
}

.vs-review-rating::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 90%;
	height: 1px;
	background: #E5E7EB;
}

.vs-review-star {
	width: 16px;
	height: 16px;
	fill: #E5E7EB;
}

.vs-review-star.filled {
	fill: #10B981;
}

.vs-review-content {
	font-size: 14px;
	line-height: 1.6;
	color: #4B5563;
}

.vs-review-content p {
	margin: 0;
}

.vs-reviews-footer {
	text-align: center;
}

.vs-view-all-reviews-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: #01488C;
	color: #FFFFFF;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
}

.vs-view-all-reviews-btn:hover {
	background: #013A70;
}

.vs-view-all-reviews-btn svg {
	transition: transform 0.2s;
}

.vs-view-all-reviews-btn:hover svg {
	transform: translateX(4px);
}

/* ========================================
   評論側邊欄
   ======================================== */
.vs-reviews-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.3s, opacity 0.3s;
}

.vs-reviews-sidebar.active {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.3s;
}

.vs-reviews-sidebar-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.vs-reviews-sidebar-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 600px;
	background: #FFFFFF;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s;
}

.vs-reviews-sidebar.active .vs-reviews-sidebar-panel {
	transform: translateX(0);
}

.vs-reviews-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px;
	border-bottom: 1px solid #E5E7EB;
}

.vs-reviews-sidebar-title {
	font-family: 'Inter', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: #1F2937;
	margin: 0 0 8px 0;
}

.vs-reviews-sidebar-subtitle {
	font-size: 14px;
	color: #6B7280;
	margin: 0;
}

.vs-reviews-sidebar-close {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F3F4F6;
	border: none;
	border-radius: 50%;
	font-size: 24px;
	color: #6B7280;
	cursor: pointer;
	transition: background 0.2s;
}

.vs-reviews-sidebar-close:hover {
	background: #E5E7EB;
}

.vs-reviews-sidebar-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 32px;
	border-bottom: 1px solid #E5E7EB;
}

.vs-reviews-filter-tabs {
	display: flex;
	gap: 8px;
}

.vs-reviews-filter-tab {
	padding: 8px 16px;
	background: transparent;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #6B7280;
	cursor: pointer;
	transition: all 0.2s;
}

.vs-reviews-filter-tab:hover {
	border-color: #01488C;
	color: #01488C;
}

.vs-reviews-filter-tab.active {
	background: #01488C;
	border-color: #01488C;
	color: #FFFFFF;
}

.vs-reviews-rating-select {
	padding: 8px 16px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	font-size: 14px;
	color: #6B7280;
	cursor: pointer;
}

.vs-reviews-sidebar-content {
	flex: 1;
	overflow-y: auto;
	padding: 24px 32px;
}

.vs-sidebar-review-item {
	padding: 24px 0;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 16px;
}

.vs-sidebar-review-item:last-child {
	margin-bottom: 0;
}

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

.vs-sidebar-review-author {
	display: flex;
	gap: 12px;
}

.vs-sidebar-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
}

.vs-sidebar-review-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-sidebar-review-author-info {
	flex: 1;
}

.vs-sidebar-review-author-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #1F2937;
	margin-bottom: 4px;
}

.vs-sidebar-review-verified {
	display: inline-block;
	padding: 2px 8px;
	background: #10B981;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
}

.vs-sidebar-review-rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vs-sidebar-star {
	width: 14px;
	height: 14px;
	fill: #E5E7EB;
}

.vs-sidebar-star.filled {
	fill: #10B981;
}

.vs-sidebar-review-location {
	font-size: 12px;
	color: #9CA3AF;
	margin-left: 4px;
}

.vs-sidebar-review-date {
	font-size: 12px;
	color: #9CA3AF;
}

.vs-sidebar-review-title {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #1F2937;
	margin: 0 0 12px 0;
}

.vs-sidebar-review-content {
	font-size: 14px;
	line-height: 1.6;
	color: #4B5563;
	margin-bottom: 16px;
}

.vs-sidebar-review-content p {
	margin: 0;
}

.vs-sidebar-review-footer {
	display: flex;
	gap: 16px;
}

.vs-sidebar-review-helpful {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	font-size: 13px;
	color: #6B7280;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
}

.vs-sidebar-review-helpful:hover:not(:disabled) {
	border-color: #01488C;
	color: #01488C;
}

.vs-sidebar-review-helpful.active {
	background: #EFF6FF;
	border-color: #01488C;
	color: #01488C;
	cursor: default;
}

.vs-sidebar-review-helpful:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.vs-sidebar-review-helpful .helpful-text {
	display: inline;
}

.vs-sidebar-review-helpful .helpful-count {
	display: inline;
}

/* 笑脸+1动画 */
.helpful-animation {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(10px);
	font-size: 16px;
	font-weight: 600;
	color: #10B981;
	opacity: 0;
	pointer-events: none;
	transition: all 0.6s ease-out;
	white-space: nowrap;
	margin-left: 8px;
}

.helpful-animation.show {
	opacity: 1;
	transform: translateY(-50%) translateX(20px);
}

.vs-reviews-sidebar-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px 32px;
	border-top: 1px solid #E5E7EB;
}

.vs-reviews-page-btn {
	/* width: 36px;
	height: 36px; */
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	color: #374151;
	cursor: pointer;
	transition: all 0.2s;
}

.vs-reviews-page-btn svg {
	width: 20px;
	height: 20px;
	stroke-width: 2.5px;
}

.vs-reviews-page-btn:hover:not(:disabled) {
	border-color: #01488C;
	color: #01488C;
}

.vs-reviews-page-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.vs-reviews-page-numbers {
	display: flex;
	align-items: center;
	gap: 4px;
}

.vs-reviews-page-num {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #6B7280;
	cursor: pointer;
	transition: all 0.2s;
}

.vs-reviews-page-num:hover {
	border-color: #01488C;
	color: #01488C;
}

.vs-reviews-page-num.active {
	background: #01488C;
	border-color: #01488C;
	color: #FFFFFF;
}

.vs-reviews-page-dots {
	padding: 0 8px;
	color: #9CA3AF;
}

/* 響應式設計 */
@media (max-width: 1200px) {
	.vs-user-reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.vs-user-reviews-section {
		padding: 24px;
	}
	
	.vs-user-reviews-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	
	.vs-user-reviews-grid {
		grid-template-columns: 1fr;
	}
	
	.vs-reviews-sidebar-panel {
		max-width: 100%;
	}
	
	.vs-reviews-sidebar-header,
	.vs-reviews-sidebar-filters,
	.vs-reviews-sidebar-content,
	.vs-reviews-sidebar-pagination {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* 加載中樣式 */
.loading-reviews {
	text-align: center;
	padding: 60px 20px;
	color: #6B7280;
	font-size: 16px;
}

.loading-reviews::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid #E5E7EB;
	border-top-color: #01488C;
	border-radius: 50%;
	margin-left: 10px;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}


/* ========================================
   客服聯繫區塊
   ======================================== */
.vs-customer-support-section {
	max-width: 1320px;
	margin: 60px auto;
	padding: 0 20px;
}

.vs-customer-support-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 30px 40px;
	background: linear-gradient(180deg, #01488C 0%, #0A5FA8 100%);
	border-radius: 20px;
	text-align: center;
}

.vs-customer-support-icon {
	flex-shrink: 0;
}

.vs-customer-support-icon img {
	width: 64px;
	height: 64px;
	display: block;
}

.vs-customer-support-content {
	text-align: center;
}

.vs-customer-support-title {
	font-family: 'Inter', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0 0 12px 0;
}

.vs-customer-support-text {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	line-height: 1.6;
}

.vs-customer-support-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	background: #FFA500;
	color: #FFFFFF;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s;
	box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
	margin-top: 8px;
}

.vs-customer-support-btn:hover {
	background: #FF8C00;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(255, 165, 0, 0.4);
	color: #FFFFFF;
	text-decoration: none;
}

/* 響應式設計 */
@media (max-width: 768px) {
	.vs-customer-support-container {
		padding: 40px 24px;
		gap: 16px;
	}
	
	.vs-customer-support-icon img {
		width: 56px;
		height: 56px;
	}
	
	.vs-customer-support-title {
		font-size: 24px;
	}
	
	.vs-customer-support-text {
		font-size: 14px;
	}
	
	.vs-customer-support-btn {
		padding: 12px 28px;
		font-size: 15px;
	}
}


/* ========================================
   相關推薦區塊
   ======================================== */
.vs-related-recommendations-section {
	max-width: 1320px;
	margin: 60px auto;
	padding: 0 20px;
}

.vs-related-recommendations-section .vs-section-title {
	font-family: 'Inter', sans-serif;
	font-size: 36px;
	font-weight: 800;
	color: #333333;
	text-align: center;
	margin: 0 0 12px 0;
}

.vs-related-recommendations-section .vs-section-subtitle {
	font-size: 18px;
	font-weight: 800;
	color: #4A5565;
	text-align: center;
	margin: 0 0 40px 0;
}

.vs-related-recommendations-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.vs-related-recommendation-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vs-related-recommendation-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	text-decoration: none;
}

.vs-related-recommendation-image {
	width: 100%;
	overflow: hidden;
}

.vs-related-recommendation-image img {
	width: 80%;
    margin: 0 auto;
    object-fit: cover;
    transition: transform 0.3s;
}

.vs-related-recommendation-card:hover .vs-related-recommendation-image img {
	transform: scale(1.05);
}

.vs-related-recommendation-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vs-related-recommendation-title {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 44px;
}

.vs-related-recommendation-price {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: #01488C;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.vs-related-recommendation-price .woocommerce-Price-amount {
	color: inherit;
}

.vs-price-suffix {
	font-size: 14px;
	font-weight: 600;
	color: #666666;
}

/* 響應式設計 */
@media (max-width: 1200px) {
	.vs-related-recommendations-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 992px) {
	.vs-related-recommendations-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.vs-related-recommendations-section {
		margin: 40px auto;
	}
	
	.vs-related-recommendations-section .vs-section-title {
		font-size: 28px;
	}
	
	.vs-related-recommendations-section .vs-section-subtitle {
		font-size: 16px;
		margin-bottom: 24px;
	}
	
	.vs-related-recommendations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	
	.vs-related-recommendation-content {
		padding: 12px;
	}
	
	.vs-related-recommendation-title {
		font-size: 14px;
		min-height: 40px;
	}
	
	.vs-related-recommendation-price {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.vs-related-recommendations-grid {
		grid-template-columns: 1fr;
	}
}


/* ========================================
   Plan Options (關聯產品選項)
======================================== */

.vs-plan-options {
	background-color: #F9FAFB !important;
	border-radius: 16px !important;
	padding: 20px !important;
	margin: 20px 0 !important;
    max-width: 800px !important;
    width: 100% !important;
}

.vs-plan-options-title {
	font-family: 'Inter', sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #1F2937 !important;
	text-align: center !important;
	margin: 0 0 15px 0 !important;
}

.vs-plan-options-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
    border: 0px solid #e0e0e0 !important;
}

.vs-plan-option-item {
	display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 8px !important;
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #1F2937 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    height: 75px;
}

.vs-plan-option-item:hover {
	border-color: #01488C !important;
	box-shadow: 0 2px 8px rgba(1, 72, 140, 0.1) !important;
}

.vs-plan-option-item.current {
	border-color: #01488C !important;
	border-width: 2px !important;
	border-style: solid !important;
	background: #FFFFFF !important;
}

.vs-plan-option-image {
	width: 65px !important;
    height: 65px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #F3F4F6 !important;
}

.vs-plan-option-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.vs-plan-option-name {
	flex: 1 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1F2937 !important;
	line-height: 1.5 !important;
}

/* 響應式設計 */
@media (max-width: 768px) {
	.vs-plan-options {
		padding: 24px 16px !important;
		margin: 16px 0 !important;
		border-radius: 12px !important;
	}
	
	.vs-plan-options-title {
		font-size: 20px !important;
		margin-bottom: 20px !important;
	}
	
	.vs-plan-options-list {
		gap: 12px !important;
	}
	
	.vs-plan-option-item {
		padding: 14px 16px !important;
		gap: 12px !important;
	}
	
	.vs-plan-option-image {
		width: 60px !important;
		height: 60px !important;
	}
	
	.vs-plan-option-name {
		font-size: 15px !important;
	}
}


/* ========================================
   新版購買區域樣式
======================================== */

/* 數量和價格行 */
.vs-quantity-price-row {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 20px !important;
}

.vs-quantity {
	display: flex !important;
	align-items: center !important;
	border: 1px solid var(--vs-border) !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	padding: 1px !important;
}

.vs-qty-btn {
	width: 44px !important;
	height: 48px !important;
	border: none !important;
	background: var(--vs-white) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--vs-text) !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	border-radius: 0 !important;
}

.vs-qty-btn:hover {
	background: var(--vs-primary);
	color: var(--vs-white) !important;
}

.vs-qty-input {
	width: 60px !important;
	height: 48px !important;
	border: none !important;
	border-left: 1px solid #D1D5DB !important;
	border-right: 1px solid #D1D5DB !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1F2937 !important;
	background: #FFFFFF !important;
}

.vs-qty-input {
	width: 60px !important;
	height: 48px !important;
	border: none !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--vs-text) !important;
}

.vs-qty-input::-webkit-outer-spin-button,
.vs-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.vs-product-price {
	display: flex !important;
	align-items: center !important;
	margin-left: auto !important;
}

.vs-price-current {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #01488C !important;
}

/* 按鈕組 */
.vs-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

/* 簡單產品：訂購數量與小計區塊靠左對齊 */
.vs-product-container:not(.variable) .vs-add-to-cart {
	align-items: flex-start !important;
}

.vs-product-container:not(.variable) .vs-add-to-cart .vs-quantity-row-wrapper,
.vs-product-container:not(.variable) .vs-add-to-cart .vs-subtotal-row {
	width: 100% !important;
}

.vs-btn-add-cart {
	width: 100% !important;
	height: 56px !important;
	background: #FFFFFF !important;
	border: 2px solid #01488C !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #01488C !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-transform: none !important;
}

.vs-btn-add-cart:hover {
	background: #F0F7FF !important;
	border-color: #013A6B !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.15) !important;
}

.vs-btn-buy-now {
	width: 100% !important;
	height: 56px !important;
	background: #01488C !important;
	border: 2px solid #01488C !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.vs-btn-buy-now:hover {
	background: #013A6B !important;
	border-color: #013A6B !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.3) !important;
}

/* 響應式設計 */
@media (max-width: 768px) {
	.vs-quantity-price-row {
		flex-direction: column !important;
		gap: 16px !important;
	}
	
	.vs-product-price {
		margin-left: 0 !important;
	}
	
	.vs-price-current {
		font-size: 24px !important;
	}
}


/* ========================================
   可變產品按鈕樣式
======================================== */

/* 確保可變產品的按鈕容器垂直排列 */
.vs-variations .variations_button,
.vs-variations .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
}

/* 可變產品的數量選擇器獨立一行 */
.vs-variations .quantity {
	width: 100% !important;
	/* margin-bottom: 12px !important; */
}

/* 可變產品的加入購物車按鈕樣式 */
.vs-variations .single_add_to_cart_button {
	width: 100% !important;
	height: 56px !important;
	background: #FFFFFF !important;
	border: 2px solid #01488C !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #01488C !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-transform: none !important;
	margin: 0 !important;
}

.vs-variations .single_add_to_cart_button:hover {
	background: #F0F7FF !important;
	border-color: #013A6B !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.15) !important;
}

/* 立即購買按鈕（可變產品） */
.vs-variations .vs-btn-buy-now {
	width: 100% !important;
	height: 56px !important;
	background: #01488C !important;
	border: 2px solid #01488C !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
}

.vs-variations .vs-btn-buy-now:hover {
	background: #013A6B !important;
	border-color: #013A6B !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.3) !important;
}

/* 移除 vs-variation-buttons 的影響 */
.vs-variation-buttons {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
}

.vs-variation-buttons .vs-btn-add-cart {
	width: 100% !important;
}


/* ========================================
   訂購數量標籤和按鈕高度統一
======================================== */

/* 訂購數量行包裝器 */
.vs-quantity-row-wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 16px !important;
}

/* 訂購數量標籤 */
.vs-quantity-label {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #1F2937 !important;
	white-space: nowrap !important;
	line-height: 48px !important;
	flex-shrink: 0 !important;
}

/* 數量選擇器（僅簡單產品，變體用 .vs-variation-quantity） */
/* 使用 > 選擇器僅作用於外層 .quantity，與 .vs-variation-quantity 邊框一致 */
.vs-quantity-row-wrapper > .quantity {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	border: 1px solid var(--vs-border) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	width: fit-content !important; /* 與變體一致，避免 200px 裁切 + 按鈕 */
	padding: 0 !important;
}

.vs-quantity-row-wrapper .quantity .vs-qty-btn,
.vs-quantity-row-wrapper .quantity button {
	width: 44px !important;
	height: 48px !important;
	border: none !important;
	background: var(--vs-white) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--vs-text) !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	border-radius: 0 !important;
	flex-shrink: 0 !important;
}

.vs-quantity-row-wrapper .quantity .vs-qty-btn:hover,
.vs-quantity-row-wrapper .quantity .vs-qty-btn:active,
.vs-quantity-row-wrapper .quantity .vs-qty-btn:focus,
.vs-quantity-row-wrapper .quantity button:hover,
.vs-quantity-row-wrapper .quantity button:active,
.vs-quantity-row-wrapper .quantity button:focus {
	background: #01488C !important;
	color: var(--vs-white) !important;
}
.quantity{
    border :none !important;
}
.vs-quantity-row-wrapper .quantity .vs-qty-input,
.vs-quantity-row-wrapper .quantity input[type="number"] {
	flex: 1 !important;
	height: 48px !important;
	border: none !important;
	/*border-left: 1px solid var(--vs-border) !important;*/
	/*border-right: 1px solid var(--vs-border) !important;*/
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--vs-text) !important;
	background: var(--vs-white) !important;
	width: auto !important;
	min-width: 0 !important;
	outline: none !important;
}

.vs-quantity-row-wrapper .quantity .vs-qty-input:focus,
.vs-quantity-row-wrapper .quantity input[type="number"]:focus {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.vs-quantity-row-wrapper .quantity .vs-qty-input::-webkit-outer-spin-button,
.vs-quantity-row-wrapper .quantity .vs-qty-input::-webkit-inner-spin-button,
.vs-quantity-row-wrapper .quantity input[type="number"]::-webkit-outer-spin-button,
.vs-quantity-row-wrapper .quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* 小計行 */
.vs-subtotal-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 20px !important;
	padding: 12px 0 !important;
	border-top: 1px solid #E5E7EB !important;
	border-bottom: 1px solid #E5E7EB !important;
}

/* 小計標籤 */
.vs-subtotal-label {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #1F2937 !important;
}

/* 小計價格 */
.vs-subtotal-price {
	text-align: right !important;
}

.vs-subtotal-price .price {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #01488C !important;
	margin: 0 !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
}

.vs-subtotal-price .price del {
	font-size: 20px !important;
	color: #9CA3AF !important;
	text-decoration: line-through !important;
}

.vs-subtotal-price .price ins {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #01488C !important;
	text-decoration: none !important;
}

.vs-subtotal-price .woocommerce-Price-amount {
	font-size: inherit !important;
	color: inherit !important;
}

/* 按鈕容器 */
.vs-buttons-wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* 可變產品的數量選擇器容器 */
.vs-variations .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

/* 隱藏原始價格容器（已移到小計行） */
.vs-variations .woocommerce-variation-price {
	display: none !important;
}

/* 隱藏底部重複的價格 */
.vs-product-container.variable .woocommerce-variation-price {
	display: none !important;
}

/* 統一按鈕高度為 56px */
.vs-btn-add-cart,
.vs-btn-buy-now,
.vs-variations .single_add_to_cart_button,
.vs-variations .vs-btn-buy-now,
.single_add_to_cart_button {
	height: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	line-height: 56px !important;
	padding: 0 24px !important;
	margin: 0 !important;
}

/* 確保按鈕內容垂直居中 */
.vs-btn-add-cart,
.vs-btn-buy-now,
.vs-variations .single_add_to_cart_button,
.vs-variations .vs-btn-buy-now {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: normal !important;
}

/* 響應式設計 */
@media (max-width: 768px) {
	.vs-quantity-row-wrapper {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
	
	.vs-subtotal-price .price {
		font-size: 24px !important;
	}
	
	.vs-subtotal-price .price ins {
		font-size: 24px !important;
	}
	
	.vs-subtotal-price .price del {
		font-size: 18px !important;
	}
}


/* ========================================
   可變產品價格容器優化（避免閃爍）
======================================== */

.woocommerce-variation-price {
	min-height: 40px !important;
	display: flex !important;
	align-items: center !important;
	transition: opacity 0.2s ease !important;
}

.woocommerce-variation-price .price {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #01488C !important;
	line-height: 1.2 !important;
}

/* 確保價格在加載時就顯示 */
.woocommerce-variation-price:empty::before {
	content: '' !important;
	display: inline-block !important;
	width: 100px !important;
	height: 32px !important;
	background: #F3F4F6 !important;
	border-radius: 4px !important;
	animation: pulse 1.5s ease-in-out infinite !important;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ========================================
   WooCommerce 變體屬性樣式優化 (圖二設計)
======================================== */

/* 先顯示伺服器輸出的色票與標籤，再由 JS 排版；勿用 opacity:0 否則在腳本執行前整塊空白（白屏感） */
.vs-variations .woo-variation-swatches:not(.vs-swatches-ready),
.vs-variations .woo-variation-swatches.vs-swatches-ready {
    opacity: 1;
    transition: opacity 0.12s ease;
}

.vs-variations .variations td.label:not(.vs-label-ready) label,
.vs-variations.vs-swatches-ready .variations td.label label {
    opacity: 1;
    transition: opacity 0.12s ease;
}

/* 1. 套餐類型 (方案) 樣式 */
.woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    max-width: 800px !important;
    width: 100% !important;
}

@media (max-width: 800px) {
    .woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper .variable-item {
    width: 100% !important;
    height: auto !important;
    min-height: 90px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper .variable-item:hover:not(.disabled):not(.selected) {
    border: 2px solid #01488C !important;
    box-shadow: none !important;
}

/* 移除插件默認的懸浮陰影 */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* 2. 服務天數 (天數) 樣式 */
.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    max-width: 800px !important;
    width: 100% !important;
}

@media (max-width: 800px) {
    .woo-variation-swatches .variable-items-wrapper.vs-days-wrapper {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woo-variation-swatches .variable-items-wrapper.vs-days-wrapper {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

@media (max-width: 400px) {
    .woo-variation-swatches .variable-items-wrapper.vs-days-wrapper {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .variable-item {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .variable-item:hover:not(.disabled):not(.selected) {
    border: 2px solid #01488C !important;
    box-shadow: none !important;
}

/* 3. 流量屬性樣式 (Global SIM 使用) */
.woo-variation-swatches .variable-items-wrapper.vs-data-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    max-width: 800px !important;
    width: 100% !important;
}

@media (max-width: 800px) {
    .woo-variation-swatches .variable-items-wrapper.vs-data-wrapper {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woo-variation-swatches .variable-items-wrapper.vs-data-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 400px) {
    .woo-variation-swatches .variable-items-wrapper.vs-data-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.woo-variation-swatches .variable-items-wrapper.vs-data-wrapper .variable-item {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-data-wrapper .variable-item:hover:not(.disabled):not(.selected) {
    border: 2px solid #01488C !important;
    box-shadow: none !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-data-wrapper .variable-item.selected {
    border: 2px solid #01488C !important;
    background: #F0F7FF !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-data-wrapper .vs-swatch-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1F2937 !important;
}

/* 確保 WooCommerce 變體表格不限制寬度 */
.vs-variations .variations {
    width: 100% !important;
    max-width: 800px !important;
}

.vs-variations .variations tr, 
.vs-variations .variations td {
    display: block !important;
    width: 100% !important;
}

.vs-variations .variations td.label {
    padding-bottom: 8px !important;
}

.vs-variations .variations td.value {
    padding-bottom: 20px !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .vs-swatch-name {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 天數數字居中樣式 */
.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .vs-days-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .vs-days-num {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    justify-content: center !important;
}

/* 選中狀態 */
.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
    border: 2px solid #01488C !important;
    background: #F0F7FF !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .variable-item.selected {
    background: #01488C !important;
}

.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .variable-item.selected .vs-swatch-name {
    color: #FFFFFF !important;
}

/* 內部結構樣式 */
.vs-swatch-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}

.vs-swatch-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* 熱門標籤樣式 */
.vs-hot-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    background: #EF4444 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* 推薦項目的特殊樣式（可選） */
.woo-variation-swatches .variable-items-wrapper .variable-item.vs-recommended {
    position: relative !important;
}

.vs-swatch-data {
    font-size: 13px !important;
    color: #6B7280 !important;
    line-height: 1.4 !important;
}

/* 3. 不可選取狀態 (Disabled) */
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled {
    opacity: 0.5 !important;
    background: #F9FAFB !important;
    cursor: not-allowed !important;
    position: relative !important;
    border: 1px solid #E5E7EB !important;
    background-image: none !important;
}

/* 套餐類型 / 服務天數：灰色項仍可點擊以切換另一屬性（見 single-product.js initCrossAttributeDisabledSwatches） */
.woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper .variable-item.disabled,
.woo-variation-swatches .variable-items-wrapper.vs-days-wrapper .variable-item.disabled {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 完全隱藏插件的所有 tooltip 氣泡和箭頭，包括不可選狀態 */
.woo-variation-swatches .variable-item[data-wvstooltip]::before,
.woo-variation-swatches .variable-item[data-wvstooltip]::after,
.woo-variation-swatches .wvs-has-image-tooltip::before,
.woo-variation-swatches .wvs-has-image-tooltip::after,
.woo-variation-swatches .variable-item.disabled[data-wvstooltip]::before,
.woo-variation-swatches .variable-item.disabled[data-wvstooltip]::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 使用圖片 icon 替換 CSS 斜槓 */
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled .vs-swatch-inner::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 24px !important;
    height: 24px !important;
    background: url('../images/single/xiegan.png') no-repeat center center !important;
    background-size: contain !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    display: block !important;
}

/* 移除 disabled 懸浮時的所有額外樣式 */
/* .woo-variation-swatches .variable-items-wrapper .variable-item.disabled:hover,
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled:focus,
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled.button-variable-item:hover {
    border: 1px solid #E5E7EB !important;
    box-shadow: none !important;
    outline: none !important;
    background: #F9FAFB !important;
    background-image: none !important;
} */

/* 完全移除 disabled 狀態的 ::before 偽元素（粗橫線來源） */
/* .woo-variation-swatches .variable-items-wrapper .variable-item.disabled::before,
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled:hover::before,
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled.button-variable-item::before,
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled.button-variable-item:hover::before {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
} */

/* 保留 ::after 的斜槓 icon */
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled:hover::after,
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled.button-variable-item::after {
    display: block !important;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .woo-variation-swatches .variable-items-wrapper.vs-plan-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .woo-variation-swatches .variable-items-wrapper.vs-days-wrapper {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* 移除插件默認的選中陰影/黃色邊框 */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, 
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: 2px solid #01488C !important;
}

/* ========================================
   Global SIM 使用日期選擇器樣式
   ======================================== */
.vs-use-date-picker {
    margin: 20px 0;
    padding: 0;
}

.vs-use-date-title {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 10px;
}

.vs-use-date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 300px;
}

.vs-use-date-input {
    width: 100%;
    padding: 12px 45px 12px 16px;
    font-size: 15px;
    color: #374151;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vs-use-date-input:hover {
    border-color: #9CA3AF;
}

.vs-use-date-input:focus {
    outline: none;
    border-color: #01488C;
    box-shadow: 0 0 0 3px rgba(1, 72, 140, 0.1);
}

.vs-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6B7280;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-use-date-hint {
    margin-top: 8px;
    font-size: 13px;
    color: #6B7280;
}

/* Flatpickr 日曆自定義樣式 */
.flatpickr-calendar {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #E5E7EB !important;
}

.flatpickr-months {
    border-radius: 12px 12px 0 0 !important;
    background: #F9FAFB !important;
}

.flatpickr-current-month {
    font-weight: 600 !important;
    color: #1F2937 !important;
}

.flatpickr-day {
    border-radius: 8px !important;
    color: #374151 !important;
}

.flatpickr-day:hover {
    background: #EFF6FF !important;
    border-color: #EFF6FF !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #01488C !important;
    border-color: #01488C !important;
    color: #FFFFFF !important;
}

.flatpickr-day.today {
    border-color: #01488C !important;
}

.flatpickr-day.today:hover {
    background: #EFF6FF !important;
    color: #01488C !important;
}

.flatpickr-day.disabled {
    color: #D1D5DB !important;
}

/* 響應式 */
@media (max-width: 480px) {
    .vs-use-date-input-wrapper {
        max-width: 100%;
    }
}

/* ========================================
   Global SIM 配送取件方式樣式
======================================== */
.vs-delivery-methods-section {
	margin: 0 auto;
    padding: 20px 0;
    max-width: 1280px;
}

.vs-delivery-container {
    max-width: 100%;
    margin: 0 auto;
}

.vs-delivery-tabs {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: -1px; /* Overlap with content border */
    position: relative;
    z-index: 2;
}

.vs-delivery-tab {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB; /* Default bottom border */
    border-radius: 12px 12px 0 0;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 0; /* Allow shrinking */
}

.vs-delivery-tab img {
    height: 32px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.vs-delivery-tab span {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.vs-delivery-tab:hover {
    background: #F9FAFB;
}

.vs-delivery-tab.active {
    background: #F9FAFB;
    border-color: #E5E7EB;
    border-bottom-color: transparent; /* 讓底部邊框透明，使其與內容區域融合 */
    z-index: 3;
}

/* 頂部藍色條樣式調整：顏色 #1D6FE8，寬度 80%，居中 */
.vs-delivery-tab.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 4px;
    background: #1D6FE8;
    border-radius: 0 0 4px 4px;
}

.vs-delivery-tab.active span {
    color: #1F2937;
    font-weight: 600;
}

.vs-delivery-tab.active img {
    transform: scale(1.1);
}

.vs-delivery-content {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
	border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-top: -1px; /* 向上移動 1px 與 Tab 邊框重合，消除斷點 */
    padding: 30px;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.vs-delivery-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.vs-delivery-pane.active {
    display: block;
}

.vs-delivery-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    align-items: center;
}

.vs-delivery-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #EFF6FF;
    border-radius: 6px;
    font-size: 14px;
    color: #1F2937;
    font-weight: 500;
}

.vs-delivery-info-item.warning {
    background: #FEF2F2;
    color: #991B1B;
}

.vs-delivery-info-item img {
    width: 20px;
    height: 20px;
}

.vs-delivery-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vs-delivery-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #4B5563;
    line-height: 1.6;
}

.vs-delivery-steps li img {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .vs-delivery-tabs {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
    }
    .vs-delivery-tab {
        min-width: 110px;
        flex: 0 0 auto;
    }
    .vs-delivery-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ========================================
   支援國家/地區按鈕和彈窗樣式
======================================== */

/* 查看支援國家按鈕 */
.vs-supported-countries-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    margin-top: 10px;
    background: linear-gradient(135deg, #F0F7FF 0%, #E8F2FF 100%);
    border: 1px solid #C5DEFF;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #1D6FE8;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.vs-supported-countries-btn:hover {
    background: linear-gradient(135deg, #E8F2FF 0%, #D6E8FF 100%);
    border-color: #1D6FE8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 111, 232, 0.15);
}

.vs-supported-countries-btn:active {
    transform: translateY(0);
}

.vs-supported-countries-btn .vs-countries-icon {
    stroke: #1D6FE8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.vs-supported-countries-btn span {
    display: flex;
    align-items: center;
    line-height: 1;
}

.vs-supported-countries-btn .vs-countries-arrow {
    stroke: #1D6FE8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* 支援國家彈窗 */
.vs-countries-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.vs-countries-modal.active {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

.vs-countries-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.vs-countries-modal-dialog {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.vs-countries-modal.active .vs-countries-modal-dialog {
    transform: translateY(0) scale(1);
}

.vs-countries-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
}

.vs-countries-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

.vs-countries-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vs-countries-modal-close:hover {
    background: #E5E7EB;
    color: #1F2937;
}

/* 搜索框 */
.vs-countries-search {
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid #E5E7EB;
}

.vs-countries-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 14px;
    color: #1F2937;
    background: #F9FAFB;
    transition: all 0.2s ease;
}

.vs-countries-search-input:focus {
    outline: none;
    border-color: #1D6FE8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.1);
}

.vs-countries-search-input::placeholder {
    color: #9CA3AF;
}

.vs-countries-search-icon {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    stroke: #9CA3AF;
    pointer-events: none;
}

/* 國家列表滾動區域 */
.vs-countries-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    max-height: calc(80vh - 140px);
}

/* 國家列表樣式 */
.vs-countries-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 國家項目 */
.vs-country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.2s ease;
}

.vs-country-item:last-child {
    border-bottom: none;
}

.vs-country-item:hover {
    background-color: #F9FAFB;
    margin: 0 -24px;
    padding: 12px 24px;
}

/* 國旗樣式 */
.vs-country-flag {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* 國家名稱 */
.vs-country-name {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* 隱藏項目（搜索過濾用） */
.vs-country-item.hidden {
    display: none;
}

/* 響應式 */
@media (max-width: 768px) {
    .vs-countries-modal-dialog {
        width: 95%;
        max-height: 85vh;
        margin: 10px;
    }
    
    .vs-countries-modal-header {
        padding: 16px 20px;
    }
    
    .vs-countries-search {
        padding: 12px 20px;
    }
    
    .vs-countries-list-scroll {
        padding: 12px 20px;
    }
    
    .vs-country-item:hover {
        margin: 0 -20px;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .vs-country-item {
        padding: 10px 0;
    }
}

/* ========================================
   產品詳情：左側浮動區塊導覽（ACF / vs-pdp-float-nav）
======================================== */

[id^='vs-pdp-'] {
	scroll-margin-top: 96px;
}

.vs-pdp-float-nav {
	position: fixed;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 997;
	max-width: 200px;
	width: max-content;
	font-family: 'Inter', system-ui, sans-serif;
}

.vs-pdp-float-nav[hidden] {
	display: none !important;
}

.vs-pdp-float-nav.is-visible {
	display: block !important;
}

.vs-pdp-float-nav-inner {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
	padding: 12px 10px;
}

.vs-pdp-float-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vs-pdp-float-nav-link {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 6px;
	border-radius: 8px;
	text-decoration: none;
	color: #374151;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.vs-pdp-float-nav-link:hover {
	background: #f3f4f6;
	color: #01488c;
}

.vs-pdp-float-nav-num {
	flex-shrink: 0;
	color: #6b7280;
	font-weight: 700;
	min-width: 1.4em;
}

.vs-pdp-float-nav-label {
	flex: 1;
	min-width: 0;
}

@media (max-width: 1200px) {
	.vs-pdp-float-nav {
		display: none !important;
	}
}