/**
 * WooCommerce 商店 / 单品 / 分类 / 购物车 / 结算页与子主题的布局适配。
 * 仅在 WC 前台页面加载（见 functions.php 的 wp_enqueue_scripts 钩子）。
 */

/* ──────────────────────────────────────────────
   主容器：替代 WC 默认 #primary/.site-main 的"无 padding"问题
   ────────────────────────────────────────────── */
.vg-shop-main {
	padding-block: 32px 64px;
}

/* WC 包裹层（变体添加到购物车的 jQuery blockUI 会用到 #primary，这里兜底） */
.vg-shop #primary,
.vg-shop .site-main {
	background: transparent;
	margin: 0;
	padding: 0;
}

/* ──────────────────────────────────────────────
   面包屑
   ────────────────────────────────────────────── */
.vg-shop .woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--text-soft, #1f2a49);
	margin-bottom: 20px;
	opacity: .8;
}
.vg-shop .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed transparent;
}
.vg-shop .woocommerce-breadcrumb a:hover {
	border-bottom-color: currentColor;
}

/* ──────────────────────────────────────────────
   单品页：图廊 + 摘要双栏（hero 区已存在的话，这里只兜底标准 WC summary）
   ────────────────────────────────────────────── */
.vg-shop .product {
	margin-block: 24px 56px;
}

.vg-shop .product .woocommerce-product-gallery {
	float: none;
	width: 48%;
	margin-right: 4%;
	display: inline-block;
	vertical-align: top;
}
.vg-shop .product .summary {
	float: none;
	width: 48%;
	display: inline-block;
	vertical-align: top;
	margin: 0;
}

@media (max-width: 900px) {
	.vg-shop .product .woocommerce-product-gallery,
	.vg-shop .product .summary {
		display: block;
		width: 100%;
		margin: 0 0 32px;
	}
}

/* 单品标题与价格 */
.vg-shop .product .product_title {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--text, #1f2a49);
}
.vg-shop .product .price,
.vg-shop .product .price .amount {
	color: var(--primary, #1f2a49);
	font-weight: 700;
}
.vg-shop .product .price {
	font-size: 22px;
	margin: 0 0 18px;
}

.vg-shop .product .woocommerce-product-details__short-description {
	color: var(--text-soft, #1f2a49);
	margin: 16px 0 22px;
}

/* 变体表单 */
.vg-shop .product form.cart {
	margin: 16px 0 22px;
}
.vg-shop .product .variations {
	margin: 0 0 16px;
}
.vg-shop .product .variations th.label,
.vg-shop .product .variations td.value {
	padding-block: 8px;
}
.vg-shop .product .single_add_to_cart_button {
	background: var(--primary, #1f2a49) !important;
	color: #fff !important;
	border-radius: 12px;
	padding: 12px 24px;
	font-weight: 700;
	border: none;
}
.vg-shop .product .single_add_to_cart_button:hover {
	background: var(--primary-dark, #1f2a49) !important;
	opacity: .92;
}
.vg-shop .product .quantity .qty {
	height: 44px;
	border: 1px solid var(--line, #f4f0e9);
	border-radius: 10px;
	padding: 0 10px;
}

/* meta（SKU / 分类 / 标签） */
.vg-shop .product .product_meta {
	font-size: 13px;
	color: var(--text-soft, #1f2a49);
	border-top: 1px solid var(--line, #f4f0e9);
	padding-top: 16px;
	margin-top: 20px;
}
.vg-shop .product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

/* ──────────────────────────────────────────────
   Tabs（描述 / 评论 / …）
   ────────────────────────────────────────────── */
.vg-shop .woocommerce-tabs {
	margin-top: 48px;
	clear: both;
}
.vg-shop .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--line, #f4f0e9);
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.vg-shop .woocommerce-tabs ul.tabs::before,
.vg-shop .woocommerce-tabs ul.tabs::after {
	display: none;
}
.vg-shop .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.vg-shop .woocommerce-tabs ul.tabs li::before,
.vg-shop .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.vg-shop .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 18px;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-soft, #1f2a49);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: .2s ease;
}
.vg-shop .woocommerce-tabs ul.tabs li.active a {
	color: var(--primary, #1f2a49);
	border-bottom-color: var(--accent, #b08729);
}

/* ──────────────────────────────────────────────
   Related / Up-sells（相关产品）
   ────────────────────────────────────────────── */
.vg-shop .related.products,
.vg-shop .upsells.products {
	margin-top: 64px;
	clear: both;
}
.vg-shop .related.products > h2,
.vg-shop .upsells.products > h2 {
	font-size: clamp(20px, 2vw, 26px);
	margin: 0 0 24px;
}
.vg-shop ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}
/* WooCommerce 默认 clearfix 伪元素会在 grid 布局下变成“多余网格项”，导致首项前出现空白块。 */
.woocommerce ul.products.columns-4::before,
.woocommerce ul.products.columns-4::after,
.woocommerce-page ul.products.columns-4::before,
.woocommerce-page ul.products.columns-4::after,
.vg-shop ul.products.columns-4::before,
.vg-shop ul.products.columns-4::after {
	content: none !important;
	display: none !important;
}
.vg-shop ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--line, #f4f0e9);
	border-radius: 14px;
	padding: 16px;
	transition: .2s ease;
}
/* 商店页首个商品项：关闭主题可能注入的伪元素，避免首项前出现装饰符号/占位。 */
.vg-shop ul.products.columns-4 > li.product:first-child::before,
.vg-shop ul.products.columns-4 > li.product:first-child:before {
	content: none !important;
	display: none !important;
}
.vg-shop ul.products li.product:hover {
	box-shadow: 0 12px 30px rgba(31, 42, 73, .08);
	transform: translateY(-2px);
}
.vg-shop ul.products li.product img {
	border-radius: 10px;
	margin-bottom: 12px;
}
.vg-shop ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	min-height: 42px;
	margin: 0 0 8px;
	padding: 0;
	color: var(--text, #1f2a49);
}
.vg-shop ul.products li.product .price {
	font-size: 15px;
	font-weight: 700;
	color: var(--primary, #1f2a49);
	margin: 0 0 12px;
}
.vg-shop ul.products li.product .button {
	display: inline-block;
	background: var(--primary, #1f2a49);
	color: #fff;
	padding: 8px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	margin-top: 0;
	text-decoration: none;
	transition: .2s ease;
}
.vg-shop ul.products li.product .button:hover {
	opacity: .92;
}

/* ──────────────────────────────────────────────
   Notices（提示）
   ────────────────────────────────────────────── */
.vg-shop .woocommerce-notices-wrapper:empty {
	display: none;
}
.vg-shop .woocommerce-message,
.vg-shop .woocommerce-info,
.vg-shop .woocommerce-error {
	border-radius: 10px;
	border-top: none;
	background: #f6f8fc;
	color: var(--text, #1f2a49);
}
.vg-shop .woocommerce-message::before,
.vg-shop .woocommerce-info::before {
	color: var(--accent, #b08729);
}

/* ──────────────────────────────────────────────
   购物车 / 结算 / 我的账户 通用润色
   ────────────────────────────────────────────── */
.vg-shop .woocommerce table.shop_table {
	border-radius: 12px;
	border: 1px solid var(--line, #f4f0e9);
	overflow: hidden;
}
.vg-shop .woocommerce form .form-row input.input-text,
.vg-shop .woocommerce form .form-row textarea,
.vg-shop .woocommerce form .form-row select {
	border-radius: 10px;
	border: 1px solid var(--line, #f4f0e9);
	padding: 10px 12px;
}
.vg-shop .button,
.vg-shop button.button,
.vg-shop .woocommerce a.button {
	background: var(--primary, #1f2a49);
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
}

/* ──────────────────────────────────────────────
   site-header 在 WC 页面统一不要顶满（保留 home.css 的粘性，但减少与 admin-bar 冲突）
   ────────────────────────────────────────────── */
.vg-shop .site-header {
	box-shadow: 0 1px 0 rgba(31, 42, 73, .04);
}

/* ──────────────────────────────────────────────
   商店网格：询价弹窗（Fluent Forms）
   ────────────────────────────────────────────── */
.vg-shop-quote-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.vg-shop-quote-modal.is-open {
	display: flex;
}

.vg-shop-quote-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

.vg-shop-quote-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	padding: 28px 24px 24px;
	box-shadow: 0 20px 50px rgba(31, 42, 73, 0.18);
	box-sizing: border-box;
}

.vg-shop-quote-modal__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--text, #1f2a49);
	cursor: pointer;
	padding: 4px 8px;
}

.vg-shop-quote-modal__title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 12px;
	padding-right: 36px;
	color: var(--text, #1f2a49);
}

.vg-shop-quote-modal__context {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-soft, #1f2a49);
	margin: 0 0 16px;
	white-space: pre-wrap;
}

.vg-shop-quote-modal__form .fluentform {
	margin: 0;
}