/**
 * 产品（参数表 / 图集 / 适合与不适合 / 悬浮预约条 / 价格说明 / 筛选条）
 *
 * 只在本页需要时加载：is_post_type_archive( 'wig_product' ) / is_tax( 'product_cat' ) / is_singular( 'wig_product' )
 * 搬家自 components.css，规则一字未改 —— 改样式前先确认这条规则属于哪个页面，
 * 放错文件的表现是「某个页面某一块样式莫名丢失」，肉眼很难发现（跑 node tools/css-coverage.js 查差集，差集必须为 0）。
 *
 * 硬规则：本文件不得出现十六进制色值或 rgb / hsl 函数，颜色/字号/圆角/阴影全部引用 tokens.css。
 *
 * @package wig-brand
 */

.wig-table {
	width: 100%;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.wig-table caption {
	caption-side: top;
	text-align: left;
	padding-bottom: var(--space-3);
}

.wig-table th,
.wig-table td {
	padding: 0 var(--space-4);
	text-align: left;
	vertical-align: middle;
}

.wig-table thead th {
	height: var(--space-9);
	background-color: var(--color-surface-2);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-1);
}

.wig-table tbody th,
.wig-table tbody td {
	height: 56px;
	border-bottom: 1px solid var(--color-border-subtle);
	font-size: var(--font-size-body-sm);
	color: var(--color-text-2);
}

.wig-table tbody tr:last-child th,
.wig-table tbody tr:last-child td {
	border-bottom: 0;
}

.wig-table tbody th {
	color: var(--color-text-1);
	font-weight: var(--font-weight-medium);
}

.wig-table .wig-num {
	text-align: right;
}

@media (max-width: 767px) {
	.wig-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.wig-table,
	.wig-table tbody,
	.wig-table tr,
	.wig-table th,
	.wig-table td {
		display: block;
		width: 100%;
	}

	.wig-table tr {
		padding: var(--space-4) 0;
		border-bottom: 1px solid var(--color-border-subtle);
	}

	.wig-table tbody th,
	.wig-table tbody td {
		height: auto;
		padding: 2px 0;
		border-bottom: 0;
	}

	.wig-table td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--font-size-caption);
		color: var(--color-text-3);
	}

	.wig-table .wig-num {
		text-align: left;
	}
}

.wig-booking-bar {
	position: fixed;
	top: var(--header-h-scrolled);
	left: 0;
	right: 0;
	z-index: var(--z-booking-bar);
	display: none;
	align-items: center;
	gap: var(--space-4);
	height: var(--booking-bar-h);
	padding-inline: var(--page-padding);
	background-color: var(--color-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--color-border-subtle);
	box-shadow: var(--shadow-3);
	transform: translateY(-100%);
	transition: transform var(--dur-2) var(--ease-out);
}

.wig-booking-bar.is-visible {
	transform: translateY(0);
}

.wig-booking-bar__title {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wig-booking-bar__note {
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
	white-space: nowrap;
}

.wig-booking-bar__spacer {
	flex: 1;
}

@media (min-width: 768px) {
	.wig-booking-bar {
		display: flex;
	}
}

.wig-gallery__main {
	position: relative;
	aspect-ratio: var(--ratio-square);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-inset);
}

.wig-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wig-gallery__thumbs {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-3);
	overflow-x: auto;
	padding-bottom: var(--space-1);
	scrollbar-width: none;
}

.wig-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.wig-gallery__thumb {
	flex: none;
	width: var(--thumb-size);
	aspect-ratio: var(--ratio-square);
	padding: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	background-color: var(--color-surface-2);
	transition: border-color var(--dur-1) var(--ease-out);
}

.wig-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wig-gallery__thumb[aria-selected="true"] {
	border-color: var(--color-primary-600);
}

.wig-suit {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.wig-suit__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
}

.wig-suit__title {
	font-family: var(--font-display);
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	font-weight: var(--font-weight-bold);
}

.wig-suit__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.wig-suit__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
}

.wig-suit__list svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 3px;
}

.wig-suit__col--yes svg {
	color: var(--color-success-line);
}

.wig-suit__col--no svg {
	color: var(--color-danger-fg-on-white);
}

.wig-price-note {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	background-color: var(--color-surface-2);
	border-radius: var(--radius-sm);
}

.wig-price-note__main {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-1);
}

.wig-price-note__sub {
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
}

.wig-gallery {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}