/* ========================================
   VAPESMALL - Cart Page Styles
   Based on Design Specifications
======================================== */

/* 與購物車側邊欄 header.css（.cart-sidebar）視覺對齊：主色 #01488C、深字 #1A1A1A、底 #F5F5F5 */
:root {
	--vs-primary: #01488C;
	--vs-primary-hover: #013a70;
	--vs-accent-warm: #FF6A00;
	--vs-secondary: #1A1A1A;
	--vs-text: #333333;
	--vs-text-light: #666666;
	--vs-text-muted: #999999;
	--vs-border: #E0E0E0;
	--vs-bg: #F5F5F5;
	--vs-bg-muted: #E8E8E8;
	--vs-white: #FFFFFF;
	--vs-error: #ff7272;
}

.vs-cart-header span.align-left{
	text-align: left;
}

/* 購物車頁麵包屑：懸停主色與側邊欄一致 */
body.woocommerce-cart .vapesmall-breadcrumb a:hover {
	color: var(--vs-primary);
}
/* ========================================
   Cart Container
======================================== */

/* Breadcrumb */
.vs-cart-breadcrumb {
	padding: 15px 0;
	font-size: 14px;
	color: var(--vs-text-muted);
	margin-bottom: 20px;
}

.vs-cart-breadcrumb a {
	color: var(--vs-text-muted);
	text-decoration: none;
	transition: color 0.3s;
}

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

.vs-cart-breadcrumb span {
	margin: 0 8px;
}

/* Page Title */
.vs-cart-title {
	font-family: 'AvenirLTStd-Black', sans-serif;
	font-size: 36px;
	font-weight: 900;
	color: var(--vs-secondary);
	margin: 16px 0 28px;
	letter-spacing: 0.02em;
}

/* ========================================
   Cart Layout
======================================== */

.vs-cart-content {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
}

/* ========================================
   Cart Table
======================================== */

.vs-cart-table {
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vs-cart-header {
	display: grid;
	grid-template-columns: 1fr 120px 170px 120px;
	gap: 10px;
	padding: 16px 24px;
	background: var(--vs-bg-muted);
	border-bottom: 1px solid var(--vs-border);
}

.vs-cart-header span {
	font-family: 'AvenirLTStd-Black', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--vs-secondary);
	text-transform: uppercase;
	text-align: center;
}

.page-content h2, .page-content h3, .page-content h4{
	margin: 0 !important;
}

/* Cart Items */
.vs-cart-items {
	padding: 0;
}

.vs-cart-item {
	display: grid;
	grid-template-columns: 1fr 120px 170px 120px;
	gap: 10px;
	padding: 26px 24px;
	border-bottom: 1px solid var(--vs-border);
	align-items: center;
	transition: all 0.3s ease;
	position: relative;
}

.vs-cart-item:last-child {
	border-bottom: none;
}

.vs-cart-item:hover {
	background: linear-gradient(90deg, #FAFAFA 0%, #FFFFFF 100%);
	box-shadow: inset 0 0 0 1px rgba(1, 72, 140, 0.12);
}

.vs-cart-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--vs-primary);
	transition: width 0.3s ease;
}

.vs-cart-item:hover::before {
	width: 3px;
}

/* Item Info */
.vs-item-info {
	display: flex;
	align-items: center;
	gap: 18px;
    text-align: left;
}

.vs-item-image {
	width: 90px;
	height: 90px;
	background: linear-gradient(135deg, #F8F8F8 0%, #FAFAFA 100%);
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

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

.vs-item-image img {
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.vs-cart-item:hover .vs-item-image img {
	transform: scale(1.05);
}

.page-content .vs-item-details h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--vs-secondary);
	line-height: 1.3;
	margin-bottom: 8px;
}

/* 商品变体属性样式 */
.vs-item-details .vs-item-variations {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.vs-item-details .vs-variation-item {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: linear-gradient(135deg, #F9F9F9 0%, #F5F5F5 100%);
	border: 1px solid #E8E8E8;
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--vs-text-light);
	transition: all 0.2s ease;
}

.vs-item-details .vs-variation-item:hover {
	background: linear-gradient(135deg, #FFFFFF 0%, #F9F9F9 100%);
	border-color: #D0D0D0;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.vs-item-details .vs-variation-item strong {
	font-weight: 600;
	color: var(--vs-text);
	margin-right: 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.vs-item-details .vs-variation-item .variation-value {
	color: var(--vs-secondary);
	font-weight: 700;
	font-size: 13px;
}

/* 其他自定义数据样式 */
.vs-item-details .vs-item-extra-data {
	margin-top: 8px;
}

.vs-item-details .woocommerce-item-data {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
}

.vs-item-details .woocommerce-item-data li {
	display: inline-flex;
	align-items: center;
	margin: 0 8px 6px 0;
	padding: 4px 12px;
	background: #F5F5F5;
	border-radius: 16px;
	line-height: 1.4;
	color: var(--vs-text-light);
}

.vs-item-details .woocommerce-item-data li strong {
	font-weight: 600;
	color: var(--vs-text);
	margin-right: 6px;
}

.vs-item-details .woocommerce-item-data li:before {
	content: '';
	display: none;
}

.vs-item-details .woocommerce-item-data li p {
	margin: 0;
	display: inline;
	font-size: inherit;
}

/* 缺货通知样式 */
.vs-item-details .backorder_notification {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 12px;
	background: #FFF9E6;
	border: 1px solid #FFD700;
	border-radius: 4px;
	font-size: 12px;
	color: #B8860B;
	font-weight: 500;
}

.vs-item-details h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.vs-item-details h3 a:hover {
	color: var(--vs-accent-warm);
}

.vs-item-meta {
	font-size: 13px;
	color: var(--vs-text-muted);
	line-height: 1.5;
}

.vs-item-meta .variation {
	display: inline-block;
	margin-right: 12px;
	padding: 4px 10px;
	background: var(--vs-bg);
	border-radius: 4px;
	font-size: 12px;
	margin-top: 4px;
}

/* Item Price */
.vs-item-price {
	font-size: 15px;
	font-weight: 600;
	color: var(--vs-text);
}

/* Quantity Control */
.vs-item-quantity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vs-qty-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vs-qty-single {
	font-size: 15px;
	font-weight: 600;
	color: var(--vs-text);
}

.vs-qty-control {
	display: flex;
	align-items: center;
	border: 1px solid var(--vs-border);
	border-radius: 0;
	overflow: hidden;
	background: var(--vs-white);
}

.vs-qty-control button {
	width: 34px;
	height: 34px;
	border: none;
	background: var(--vs-bg);
	font-size: 18px;
	font-weight: 600;
	color: var(--vs-text);
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
}

.vs-qty-control button:hover {
	background: var(--vs-primary);
	color: var(--vs-white);
}

.vs-qty-control button:active {
	transform: scale(0.95);
}

.vs-qty-control input {
	width: 44px;
	height: 34px;
	border: none;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--vs-text);
	background: var(--vs-white);
}

.vs-qty-control input:focus {
	outline: none;
}

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

.vs-item-remove {
	background: var(--vs-bg);
	color: var(--vs-text-muted);
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
	padding: 6px;
	width: 32px;
	height: 32px;
	border: none;
}

.vs-item-remove img {
	display: block;
	opacity: 0.75;
	transition: opacity 0.2s, filter 0.2s;
}

.vs-item-remove:hover {
	background: var(--vs-primary);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(1, 72, 140, 0.25);
}

.vs-item-remove:hover img {
	opacity: 1;
	filter: brightness(0) invert(1);
}

.vs-item-remove:active {
	transform: translateY(0);
}

/* Item Subtotal */
.vs-item-subtotal {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--vs-secondary);
}

/* Cart Actions */
.vs-cart-actions {
	padding: 22px 0 8px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.vs-cart-actions a {
	color: var(--vs-text-light);
	text-decoration: none;
	transition: color 0.3s;
	font-weight: 600;
	font-size: 14px;
}

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

.vs-cart-actions a.vs-clear-cart {
	color: var(--vs-text-muted);
	font-weight: 500;
}

.vs-cart-actions a.vs-clear-cart:hover {
	color: var(--vs-accent-warm);
}

.vs-cart-actions span {
	color: var(--vs-border);
}
.vs-cart-wrapper{
	margin-bottom: 6vw;
}
/* ========================================
   Cart Sidebar
======================================== */

.vs-cart-sidebar {
	position: sticky;
	top: 120px;
}

/* Coupon Box */
.vs-coupon-box {
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	border-radius: 6px;
	padding: 22px 24px;
	margin-bottom: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vs-coupon-box p {
	font-size: 14px;
	color: var(--vs-text-light);
	margin: 0 0 16px;
	line-height: 1.5;
}

.vs-coupon-form {
	display: flex;
	gap: 10px;
}

.vs-coupon-input {
	flex: 1;
	height: 46px;
	padding: 0 16px;
	border: 2px solid var(--vs-border);
	border-radius: 8px;
	font-size: 14px;
	color: var(--vs-text);
	transition: all 0.3s ease;
	background: var(--vs-white);
}

.vs-coupon-input:focus {
	outline: none;
	border-color: var(--vs-primary);
	box-shadow: 0 0 0 3px rgba(1, 72, 140, 0.12);
}

.vs-coupon-input::placeholder {
	color: var(--vs-text-muted);
}

.vs-coupon-btn {
	height: 46px;
	padding: 0 24px;
	background: var(--vs-white);
	border: 2px solid var(--vs-border);
	border-radius: 4px;
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: var(--vs-secondary);
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.vs-coupon-btn:hover {
	background: var(--vs-primary);
	border-color: var(--vs-primary);
	color: var(--vs-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.28);
}

/* 优惠券加载状态 */
.vs-coupon-box.loading {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}

.vs-coupon-box.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid rgba(1, 72, 140, 0.15);
	border-top-color: var(--vs-primary);
	border-radius: 50%;
	animation: couponSpin 0.8s linear infinite;
	z-index: 10;
}

@keyframes couponSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.vs-coupon-btn.loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.vs-coupon-btn.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--vs-text);
	border-radius: 50%;
	animation: couponSpin 0.8s linear infinite;
}

.vs-coupon-input:disabled {
	background: #F5F5F5;
	cursor: not-allowed;
}

/* 优惠券移除动画 */
.cart-discount.removing {
	animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		transform: translateX(-20px);
		height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
}

/* 优惠券移除按钮样式优化 */
.woocommerce-remove-coupon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	background: #FFE5E5;
	border: none;
	border-radius: 50%;
	color: #FF4444;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	line-height: 1;
}

.woocommerce-remove-coupon:hover {
	background: #FF4444;
	color: white;
	transform: scale(1.1) rotate(90deg);
}

/* Summary Box */
.vs-summary-box {
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	border-radius: 6px;
	padding: 26px 24px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vs-summary-title {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--vs-secondary);
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--vs-border);
	letter-spacing: 0.03em;
}

.vs-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid #F5F5F5;
	transition: background 0.2s;
}

/* .vs-summary-row:hover {
	background: #FAFAFA;
	margin: 0 -8px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 6px;
} */

.vs-summary-row:last-of-type {
	border-bottom: none;
}

.vs-summary-label {
	font-size: 15px;
	color: var(--vs-text-light);
	font-weight: 500;
}

.vs-summary-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--vs-text);
}

/* ========================================
 * 运费选项优化样式
 * ======================================== */

/* 运费行特殊处理 */
.vs-summary-row.shipping {
	border-bottom: none;
}

.page-content p.woocommerce-shipping-destination{
	margin: 20px 0 0 0;
    font-size: 16px;
}

.vs-summary-row.shipping:hover {
	background: transparent;
	margin: 0;
}

.vs-summary-row.shipping .vs-summary-label {
	display: block;
	font-size: 16px;
	color: var(--vs-text);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vs-summary-row.shipping .vs-summary-value {
	display: block;
	font-weight: normal;
	width: 100%;
	text-align: right;
}

/* 运费选项列表 */
.vs-summary-row.shipping .woocommerce-shipping-methods {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

/* 确保 WooCommerce 默认结构的兼容性 */
.vs-summary-row.shipping .woocommerce-shipping-methods li input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	left: -9999px !important;
}

/* 处理 input 在 label 内部的情况 */
.vs-summary-row.shipping .woocommerce-shipping-methods li label input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li label {
	width: 100%;
	margin: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

/* 确保 label 内的文本正确显示 */
.vs-summary-row.shipping .woocommerce-shipping-methods li label .woocommerce-Price-currencySymbol {
	margin-right: 2px;
}

/* 运费选项卡片 */
.vs-summary-row.shipping .woocommerce-shipping-methods label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #FAFAFA;
	border: 2px solid #F0F0F0;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

/* 卡片hover效果 */
.vs-summary-row.shipping .woocommerce-shipping-methods label:hover {
	background: #F5F5F5;
	border-color: #E0E0E0;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 选中状态 */
.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:checked + label {
	background: linear-gradient(135deg, #F0F7FC 0%, #E8F2FA 100%);
	border-color: var(--vs-primary);
	box-shadow: 0 4px 16px rgba(1, 72, 140, 0.18);
}

/* 选中状态的动画背景 */
.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:checked + label::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(1, 72, 140, 0.06) 0%, rgba(91, 155, 213, 0.06) 100%);
	pointer-events: none;
	animation: shimmer 2s ease-in-out infinite;
}

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

/* 隐藏原生单选按钮 */
.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* 自定义单选按钮 */
.vs-summary-row.shipping .woocommerce-shipping-methods label::after {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid #D0D0D0;
	border-radius: 50%;
	background: white;
	flex-shrink: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 1;
}

/* 选中状态的单选按钮 */
.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:checked + label::after {
	border-color: var(--vs-primary);
	border-width: 6px;
	background: white;
	box-shadow: 0 0 0 2px rgba(1, 72, 140, 0.2);
}

/* 运费选项文本容器 */
.vs-summary-row.shipping .woocommerce-shipping-methods label > span,
.vs-summary-row.shipping .woocommerce-shipping-methods label .woocommerce-shipping-method-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	font-size: 14px;
	color: var(--vs-text);
	font-weight: 500;
	position: relative;
	z-index: 1;
}

/* 运费方式名称 */
.vs-summary-row.shipping .woocommerce-shipping-methods .woocommerce-Price-amount,
.vs-summary-row.shipping .woocommerce-shipping-methods .amount,
.vs-summary-row.shipping .woocommerce-shipping-methods bdi {
	font-weight: 700;
	color: var(--vs-secondary);
	font-size: 15px;
}

/* 修复可能的文本换行问题 */
.vs-summary-row.shipping .woocommerce-shipping-methods label span,
.vs-summary-row.shipping .woocommerce-shipping-methods label .woocommerce-shipping-method-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 30px);
}

/* Free shipping 特殊样式 */
.vs-summary-row.shipping .woocommerce-shipping-methods li:has(input[value*="free_shipping"]) label {
	background: linear-gradient(135deg, #F0FFF4 0%, #E6F9F0 100%);
	border-color: #C6F6D5;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li:has(input[value*="free_shipping"]) label:hover {
	background: linear-gradient(135deg, #E6F9F0 0%, #D0F4E2 100%);
	border-color: #9AE6B4;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li:has(input[value*="free_shipping"]) input[type="radio"]:checked + label {
	background: linear-gradient(135deg, #E6F9F0 0%, #D0F4E2 100%);
	border-color: #48BB78;
	box-shadow: 0 4px 16px rgba(72, 187, 120, 0.25);
}

.vs-summary-row.shipping .woocommerce-shipping-methods li:has(input[value*="free_shipping"]) input[type="radio"]:checked + label::after {
	border-color: #48BB78;
}

/* 运费图标（可选） */
.vs-summary-row.shipping .woocommerce-shipping-methods label > span::before,
.vs-summary-row.shipping .woocommerce-shipping-methods label::before {
	content: '🚚';
	font-size: 18px;
	filter: grayscale(0.5);
	transition: all 0.3s;
	flex-shrink: 0;
	position: static;
	width: auto;
	height: auto;
	border: none;
	background: transparent;
	margin-right: 8px;
	z-index: 2;
}

/* 优先级：label::before 用于动画背景，label > span::before 用于图标 */
.vs-summary-row.shipping .woocommerce-shipping-methods label::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	pointer-events: none;
	z-index: 0;
}

.vs-summary-row.shipping .woocommerce-shipping-methods label > span::before {
	content: '🚚';
	position: static;
}

.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:checked + label > span::before {
	filter: grayscale(0);
	animation: bounce 0.6s ease;
}

@keyframes bounce {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

/* Free shipping 图标 */
.vs-summary-row.shipping .woocommerce-shipping-methods li:has(input[value*="free_shipping"]) label > span::before {
	content: '🎁';
}

/* Ajax 更新时的过渡效果 */
.vs-summary-row.shipping {
	transition: opacity 0.3s ease;
}

.vs-summary-row.shipping.updating-shipping {
	opacity: 0.7;
	pointer-events: none;
}

/* 加载状态动画 */
.vs-summary-row.shipping .woocommerce-shipping-methods label.loading {
	pointer-events: none;
	opacity: 0.6;
	position: relative;
}

.vs-summary-row.shipping .woocommerce-shipping-methods label.loading::before {
	animation: shimmer 1s ease-in-out infinite !important;
}

/* 确保 Ajax 更新后样式不丢失 */
.vs-summary-row.shipping .woocommerce-shipping-methods.vs-shipping-initialized li {
	animation: none;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li:first-child {
	animation-delay: 0s;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li:nth-child(2) {
	animation-delay: 0.05s;
}

.vs-summary-row.shipping .woocommerce-shipping-methods li:nth-child(3) {
	animation-delay: 0.1s;
}

/* 运费计算中提示 */
.vs-summary-row.shipping .woocommerce-shipping-calculator {
	margin-top: 12px;
	padding: 12px;
	background: #F9F9F9;
	border-radius: 8px;
	font-size: 13px;
	color: var(--vs-text-muted);
}

/* 运费计算按钮 */
.vs-summary-row.shipping .shipping-calculator-button {
	color: var(--vs-primary);
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 13px;
	transition: color 0.2s;
}

.vs-summary-row.shipping .shipping-calculator-button:hover {
	color: var(--vs-secondary);
}

/* 运费价格突出显示 */
.vs-summary-row.shipping .woocommerce-shipping-methods .amount {
	font-weight: 700;
	color: var(--vs-secondary);
	margin-left: 4px;
}

/* Free 标签样式 */
.vs-summary-row.shipping .woocommerce-shipping-methods li:has(input[value*="free_shipping"]) .amount {
	color: #48BB78;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.5px;
}

/* 选项切换时的动画 */
.vs-summary-row.shipping .woocommerce-shipping-methods {
	animation: slideIn 0.4s ease-out;
}

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

/* 运费方法描述文本 */
.vs-summary-row.shipping .woocommerce-shipping-methods label .woocommerce-shipping-method-description {
	font-size: 12px;
	color: var(--vs-text-muted);
	display: block;
	margin-top: 4px;
	font-weight: normal;
}

/* 焦点状态 */
.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:focus + label {
	outline: 2px solid var(--vs-primary);
	outline-offset: 2px;
}

/* 禁用状态 */
.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:disabled + label {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* 响应式调整 */
@media (max-width: 480px) {
	.vs-summary-row.shipping .woocommerce-shipping-methods {
		gap: 8px;
	}
	
	.vs-summary-row.shipping .woocommerce-shipping-methods label {
		padding: 12px 14px;
		font-size: 13px;
	}
	
	.vs-summary-row.shipping .woocommerce-shipping-methods label::after {
		width: 18px;
		height: 18px;
	}
	
	.vs-summary-row.shipping .woocommerce-shipping-methods input[type="radio"]:checked + label::after {
		border-width: 5px;
	}
	
	.vs-summary-row.shipping .woocommerce-shipping-methods label > span::before {
		font-size: 16px;
	}
}

.vs-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0 16px;
	border-top: 2px solid var(--vs-border);
}

.vs-summary-total .vs-summary-label {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--vs-secondary);
	letter-spacing: 0.5px;
}

.vs-summary-total .vs-summary-value {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 32px;
	font-weight: 900;
	color: var(--vs-secondary);
	letter-spacing: -0.5px;
}

/* Free Shipping Notice */
.vs-shipping-notice {
	text-align: center;
	font-size: 13px;
	color: var(--vs-text-muted);
	margin: 20px 0;
	padding: 14px 16px;
	background: linear-gradient(135deg, #F5FAFC 0%, #EEF6FB 100%);
	border-radius: 6px;
	border: 1px solid rgba(1, 72, 140, 0.12);
	animation: pulseNotice 2s ease-in-out infinite;
}

.vs-shipping-notice strong {
	color: var(--vs-primary);
	font-weight: 700;
}

@keyframes pulseNotice {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.85; }
}

/* Checkout Button（與側邊欄 .btn-checkout 一致） */
.vs-checkout-btn {
	display: block;
	width: 100%;
	height: 52px;
	background: var(--vs-primary);
	border: none;
	border-radius: 4px;
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: var(--vs-white);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	line-height: 52px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	letter-spacing: 0.5px;
}

.vs-checkout-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s;
}

.vs-checkout-btn:hover {
	background: var(--vs-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(1, 72, 140, 0.35);
	color: var(--vs-white);
}

.vs-checkout-btn:hover::before {
	left: 100%;
}

.vs-checkout-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(1, 72, 140, 0.28);
}

/* ========================================
   Empty Cart（置中、與側邊欄主色一致）
======================================== */

.vs-cart-wrapper--empty {
	margin-bottom: 0;
}

.vs-cart-empty-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(52vh, 520px);
	padding: 48px 20px 72px;
	box-sizing: border-box;
}

.vs-cart-empty {
	text-align: center;
	max-width: 420px;
	margin: 0 auto;
}
.vs-cart-empty-icon {
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.vs-cart-empty-icon svg {
	stroke: rgba(1, 72, 140, 0.35);
	color: rgba(1, 72, 140, 0.35);
}

.vs-cart-empty-text {
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--vs-secondary);
	margin: 0 0 28px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.vs-btn-shop {
	display: inline-block;
	padding: 12px 30px;
	background: var(--vs-secondary);
	border-radius: 4px;
	font-family: 'AvenirLTStd-Heavy', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--vs-white);
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.3s;
}

.vs-btn-shop:hover {
	background: var(--vs-primary);
	transform: translateY(-2px);
	color: var(--vs-white);
}

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

@media (max-width: 1200px) {
	.vs-cart-content {
		grid-template-columns: 1fr 340px;
		gap: 30px;
	}
	
	.page-content .vs-item-details h3 {
		font-size: 18px;
	}
	
	.vs-item-details .vs-variation-item {
		font-size: 12px;
		padding: 5px 12px;
	}
	
	.vs-item-details .vs-variation-item strong {
		font-size: 11px;
	}
}

@media (max-width: 992px) {
	.vs-cart-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	
	.vs-cart-sidebar {
		position: static;
		order: 2;
	}
	
	.vs-cart-header {
		display: none;
	}
	
	.vs-cart-item {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 20px;
	}
	
	.vs-cart-item::before {
		display: none;
	}
	
	.vs-item-info {
		order: 1;
	}
	
	.vs-item-price {
		order: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.vs-item-price::before {
		content: 'Price:';
		color: var(--vs-text-muted);
		font-weight: 500;
		font-size: 14px;
	}
	
	.vs-item-quantity {
		order: 3;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.vs-item-quantity::before {
		content: 'Quantity:';
		color: var(--vs-text-muted);
		font-weight: 500;
		font-size: 14px;
	}
	
	.vs-item-subtotal {
		order: 4;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 12px;
		border-top: 1px solid var(--vs-border);
	}
	
	.vs-item-subtotal::before {
		content: 'Subtotal:';
		color: var(--vs-text-muted);
		font-weight: 500;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.vs-cart-wrapper {
		padding: 15px 15px 60px;
	}

	.vs-cart-wrapper--empty {
		padding-bottom: 48px;
	}

	.vs-cart-empty-wrap {
		min-height: min(44vh, 400px);
		padding: 32px 16px 48px;
	}

	.vs-cart-empty-icon svg {
		width: 72px;
		height: 72px;
	}

	.vs-cart-empty-text {
		font-size: 16px;
		margin-bottom: 24px;
	}
	
	.vs-cart-title {
		font-size: 26px;
		margin-bottom: 24px;
	}
	
	.vs-cart-table {
		border-radius: 5px;
	}
	
	.vs-cart-item {
		padding: 16px;
	}
	
	.vs-item-image {
		width: 70px;
		height: 70px;
	}
	
	.vs-item-info {
		gap: 14px;
	}
	
	.vs-item-details h3 {
		font-size: 14px;
	}
	
	.vs-item-details .vs-item-variations {
		gap: 6px;
		margin-top: 6px;
	}
	
	.vs-item-details .vs-variation-item {
		font-size: 11px;
		padding: 4px 10px;
	}
	
	.vs-item-details .vs-variation-item strong {
		font-size: 10px;
		margin-right: 4px;
	}
	
	.vs-item-details .vs-variation-item .variation-value {
		font-size: 11px;
	}
	
	.vs-coupon-input,
	.vs-coupon-btn {
		height: 44px;
	}
	
	.vs-summary-box {
		padding: 20px 18px;
	}
	
	.vs-summary-title {
		font-size: 20px;
		margin-bottom: 20px;
	}
	
	.vs-summary-total .vs-summary-label {
		font-size: 16px;
	}
	
	.vs-summary-total .vs-summary-value {
		font-size: 26px;
	}
	
	.vs-checkout-btn {
		height: 50px;
		line-height: 50px;
		font-size: 15px;
	}
	
	.vs-cart-actions {
		gap: 12px;
		text-align: center;
	}
	
	.vs-cart-actions span {
		display: none;
	}
}

/* ========================================
   Loading States & Animations
======================================== */

.vs-cart-item.updating {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}

.vs-cart-item.updating::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid var(--vs-border);
	border-top-color: var(--vs-primary);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
	z-index: 10;
}

.vs-cart-item.removing {
	animation: slideOut 0.4s ease forwards;
}

@keyframes slideOut {
	0% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
	50% {
		opacity: 0.5;
		transform: translateX(-10px) scale(0.98);
	}
	100% {
		opacity: 0;
		transform: translateX(-30px) scale(0.95);
		height: 0;
		padding: 0;
		margin: 0;
	}
}

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

/* Smooth transitions */
.vs-cart-item,
.vs-item-price,
.vs-item-subtotal,
.vs-summary-value {
	transition: all 0.3s ease;
	text-align: center;
}

/* Price update animation */
@keyframes priceUpdate {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); color: var(--vs-primary); }
}

.vs-price-updating {
	animation: priceUpdate 0.5s ease;
}

/* Button click effect */
.vs-qty-control button:active,
.vs-item-remove:active,
.vs-coupon-btn:active,
.vs-checkout-btn:active {
	transform: scale(0.95);
}

/* ========================================
   WooCommerce Blocks：空購物車 CTA（例：瀏覽商店）
   修正父層 flex／區塊預設導致按鈕變窄長條，並統一主色 #01488c
======================================== */

.wc-block-cart .wp-block-woocommerce-empty-cart-block,
.wp-block-woocommerce-empty-cart-block {
	overflow: visible;
}

.wp-block-woocommerce-empty-cart-block .wp-block-buttons {
	width: 100%;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.wp-block-woocommerce-empty-cart-block .wp-block-buttons.is-vertical {
	align-items: center;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button,
.wp-block-woocommerce-empty-cart-block .wp-block-buttons > .wp-block-button {
	width: auto !important;
	flex: 0 0 auto !important;
	max-width: 100%;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: 160px;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 12px 28px !important;
	line-height: 1.4 !important;
	border-radius: 6px !important;
	background-color: #01488c !important;
	color: #fff !important;
	border: none !important;
	text-decoration: none !important;
	white-space: normal;
	word-break: break-word;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link:hover {
	background-color: var(--vs-primary-hover) !important;
	color: #fff !important;
}

.wp-block-woocommerce-empty-cart-block a.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text),
.wp-block-woocommerce-empty-cart-block button.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 160px;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 12px 28px !important;
	line-height: 1.4 !important;
	border-radius: 6px !important;
	background-color: #01488c !important;
	color: #fff !important;
}

.wp-block-woocommerce-empty-cart-block a.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text):hover,
.wp-block-woocommerce-empty-cart-block button.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text):hover {
	background-color: var(--vs-primary-hover) !important;
	color: #fff !important;
}