/**
 * components.css · 全站共用组件（design-spec §5）
 *
 * 常驻加载：按钮、导航、抽屉、底部常驻条、页脚、卡片骨架、徽标/标签、面包屑、分页、Tab、
 * 手风琴、表单、表格容器、区块标题、品类瓦片、品牌卡、CTA 横幅、回顶、空态、模态、轮播容器、
 * 搜索/404、hero（仅首页渲染，但体积小且与轮播容器耦合，留在这里）。
 *
 * 页面专用样式已拆到：page-product.css / page-guide.css / page-store.css（条件加载，见 inc/enqueue.php）。
 *
 * 硬规则：本文件不得出现十六进制色值或 rgb / hsl 函数 —— 颜色、字号、圆角、阴影全部引用 tokens.css 变量。
 *
 * @package wig-brand
 */

/**
 * components.css · 组件样式（design-spec §5）
 *
 * 硬规则：本文件不得出现十六进制色值或 rgb / hsl 函数 —— 颜色、字号、圆角、阴影全部引用 tokens.css 变量。
 *
 * @package wig-brand
 */

/* ═══════════════════════════════════════════════════════════
   5.6 页脚
   ═══════════════════════════════════════════════════════════ */

.wig-footer__brand img {
	height: 32px;
	width: auto;
}

.wig-footer__brand-name {
	color: var(--color-text-inverse);
}

.wig-footer__intro {
	color: var(--color-text-inverse-2);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	max-width: 26em;
}

.wig-footer__qr {
	width: var(--qr-size);
	height: var(--qr-size);
	padding: var(--space-2);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

.wig-footer__qr-note {
	margin-top: var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-text-inverse-3);
}

.wig-footer__col-title {
	margin-bottom: var(--space-5);
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.04em;
	color: var(--color-text-inverse);
}

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

.wig-footer__list li {
	font-size: var(--font-size-body-sm);
	line-height: 36px;
	color: var(--color-text-inverse-2);
}

.wig-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.wig-footer__list a:hover {
	color: var(--color-text-inverse);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wig-footer__tel {
	font-size: 15px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-inverse);
}

.wig-footer__legal a + a::before {
	content: "·";
	margin: 0 var(--space-2);
	color: var(--color-text-inverse-3);
}

@media (min-width: 768px) {
	.wig-footer__list li {
		line-height: 36px;
	}
}

/* 触屏端行高 44px（design-spec §5.6） */

@media (max-width: 767px) {
	.wig-footer__list li,
	.wig-footer__list a {
		line-height: 44px;
		min-height: 44px;
	}
}

/* ═══════════════════════════════════════════════════════════
   5.1 按钮
   ═══════════════════════════════════════════════════════════ */

.wig-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--btn-h);
	padding: 0 28px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--font-size-button);
	line-height: var(--line-height-button);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--dur-1) var(--ease-out),
		color var(--dur-1) var(--ease-out),
		border-color var(--dur-1) var(--ease-out),
		transform var(--dur-2) var(--ease-out),
		box-shadow var(--dur-2) var(--ease-out);
}

.wig-btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.wig-btn--lg {
	min-height: var(--btn-h-lg);
	padding-inline: var(--space-7);
	font-size: var(--font-size-button);
}

.wig-btn--sm {
	min-height: var(--btn-h-sm);
	padding-inline: var(--space-5);
	font-size: 15px;
}

.wig-btn--block {
	width: 100%;
}

.wig-btn--primary {
	background-color: var(--color-primary-600);
	color: var(--color-surface);
}

.wig-btn--primary:hover {
	background-color: var(--color-primary-700);
	color: var(--color-surface);
	transform: translateY(-1px);
	box-shadow: var(--shadow-2);
}

.wig-btn--primary:active {
	background-color: var(--color-primary-800);
	transform: translateY(0);
}

.wig-btn--secondary {
	background-color: transparent;
	color: var(--color-primary-700);
	border-color: var(--color-border-strong);
}

.wig-btn--secondary:hover {
	background-color: var(--color-primary-50);
	border-color: var(--color-primary-600);
	color: var(--color-primary-700);
}

.wig-btn--secondary:active {
	background-color: var(--color-primary-100);
	border-color: var(--color-primary-700);
}

.wig-btn--text {
	min-height: var(--btn-h-sm);
	padding: 0 var(--space-1);
	background-color: transparent;
	color: var(--color-primary-600);
	border-color: transparent;
}

.wig-btn--text:hover {
	color: var(--color-primary-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.wig-btn--icon {
	width: var(--tap-min);
	height: var(--tap-min);
	min-height: var(--tap-min);
	padding: 0;
	background-color: transparent;
	color: var(--color-text-2);
	border-color: transparent;
	border-radius: var(--radius-pill);
}

.wig-btn--icon:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-btn--icon:active {
	background-color: var(--color-border-subtle);
}

.wig-btn--light {
	background-color: var(--color-surface);
	color: var(--color-text-1);
}

.wig-btn--ghost-inverse {
	background-color: transparent;
	color: var(--color-text-inverse);
	border-color: var(--color-border-inverse);
}

.wig-btn--ghost-inverse:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
	border-color: var(--color-surface);
}

.wig-btn:disabled,
.wig-btn[aria-disabled="true"] {
	background-color: var(--color-disabled-bg);
	color: var(--color-text-disabled);
	border-color: var(--color-border);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.wig-btn.is-loading {
	cursor: progress;
}

.wig-btn__spinner {
	width: 16px;
	height: 16px;
	border-radius: var(--radius-full);
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: wig-spin 800ms linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════
   5.2 导航
   ═══════════════════════════════════════════════════════════ */

.wig-nav {
	display: none;
	align-items: center;
	gap: var(--space-1);
}

.wig-nav__item {
	position: relative;
}

/* 指派了 WP 菜单时，把 ul/li 拍平成 flex 子项，视觉与内置导航一致 */

.wig-nav__list {
	display: contents;
}

.wig-nav__list > li {
	position: relative;
	list-style: none;
}

.wig-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: var(--tap-min);
	padding: 0 var(--space-4);
	border-radius: var(--radius-sm);
	color: var(--color-text-2);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.wig-nav__list > li > a:hover {
	color: var(--color-text-1);
	background-color: var(--color-surface-2);
}

.wig-nav__list > li.current-menu-item > a {
	color: var(--color-text-1);
	font-weight: var(--font-weight-bold);
}

.wig-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	width: 280px;
	padding: var(--space-2);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-3);
	display: none;
}

.wig-nav__list > li:hover > .sub-menu,
.wig-nav__list > li:focus-within > .sub-menu {
	display: block;
}

.wig-nav__list .sub-menu a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--color-text-2);
	font-size: 15px;
}

.wig-nav__list .sub-menu a:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: var(--tap-min);
	padding: 0 var(--space-4);
	border-radius: var(--radius-sm);
	color: var(--color-text-2);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.wig-nav__link:hover {
	color: var(--color-text-1);
	background-color: var(--color-surface-2);
}

.wig-nav__link[aria-current="page"] {
	color: var(--color-text-1);
	font-weight: var(--font-weight-bold);
}

.wig-nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: var(--space-4);
	right: var(--space-4);
	bottom: 6px;
	height: 2px;
	background-color: var(--color-primary-600);
	border-radius: var(--radius-full);
}

.wig-nav__chev {
	width: 16px;
	height: 16px;
}

/* 下拉面板 */

.wig-nav__panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	z-index: var(--z-header);
	width: 280px;
	padding: var(--space-2);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--dur-2) var(--ease-out),
		transform var(--dur-2) var(--ease-out),
		visibility var(--dur-2);
}

.wig-nav__item.is-open > .wig-nav__panel,
.wig-nav__item:hover > .wig-nav__panel,
.wig-nav__item:focus-within > .wig-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wig-nav__panel--sm {
	width: 240px;
}

.wig-nav__panel-link {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--color-text-2);
	font-size: 15px;
	min-height: var(--tap-min);
}

.wig-nav__panel-link:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-nav__panel-link--two-line {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-1);
	min-height: 56px;
}

.wig-nav__panel-link strong {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-1);
}

.wig-nav__panel-link span {
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
}

/* 页头右侧组 */

.wig-header__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.wig-header__logo img,
.wig-header__logo svg {
	height: 28px;
	width: auto;
}

.wig-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}

.wig-header__phone {
	display: none;
	align-items: center;
	gap: var(--space-2);
	height: var(--tap-min);
	color: var(--color-text-1);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.wig-header__phone svg {
	width: 20px;
	height: 20px;
}

.wig-header__cta {
	display: none;
}

.wig-header__burger {
	display: inline-flex;
}

/* 搜索浮层 */

.wig-search-pop {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: var(--space-4);
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border-subtle);
	box-shadow: var(--shadow-3);
}

.wig-search-pop[hidden] {
	display: none;
}

/* 导航显示切换：<768 抽屉；≥768 横排；≥1200 完整形态 */

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

	.wig-header__burger {
		display: none;
	}

	.wig-header__phone {
		display: inline-flex;
	}

	.wig-header__phone span {
		display: none;
	}

	.wig-header__cta {
		display: inline-flex;
	}

	.wig-header__logo img,
	.wig-header__logo svg {
		height: 32px;
	}
}

@media (min-width: 1200px) {
	.wig-header__phone span {
		display: inline;
	}

	.wig-nav__link {
		padding: 0 var(--space-4);
	}
}

/* ═══════════════════════════════════════════════════════════
   5.2.3 移动抽屉
   ═══════════════════════════════════════════════════════════ */

.wig-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: none;
}

.wig-drawer.is-open {
	display: block;
}

.wig-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--color-scrim);
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease-in-out);
	border: 0;
	width: 100%;
	cursor: pointer;
}

.wig-drawer.is-open .wig-drawer__scrim {
	opacity: 1;
}

.wig-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(88vw, 380px);
	height: 100dvh;
	padding: var(--space-4) var(--space-5)
		calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	background-color: var(--color-surface);
	box-shadow: var(--shadow-3);
	transform: translateX(100%);
	transition: transform var(--dur-3) var(--ease-drawer);
	overflow-y: auto;
}

.wig-drawer.is-open .wig-drawer__panel {
	transform: translateX(0);
}

.wig-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.wig-drawer__head img,
.wig-drawer__head svg {
	height: 28px;
	width: auto;
}

.wig-drawer__nav {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-4);
}

.wig-drawer__item {
	border-bottom: 1px solid var(--color-border-subtle);
}

.wig-drawer__link,
.wig-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	color: var(--color-text-1);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	text-align: left;
}

.wig-drawer__toggle svg {
	width: 16px;
	height: 16px;
	transition: transform var(--dur-3) var(--ease-out);
}

.wig-drawer__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wig-drawer__sub {
	padding-left: var(--space-4);
	padding-bottom: var(--space-2);
}

.wig-drawer__sub[hidden] {
	display: none;
}

.wig-drawer__sub a {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--color-text-2);
	font-size: 15px;
}

.wig-drawer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
}

.wig-drawer__contact a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 48px;
	color: var(--color-text-1);
	font-size: 15px;
}

.wig-drawer__contact svg {
	width: 20px;
	height: 20px;
	color: var(--color-text-3);
}

.wig-drawer__foot {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
	line-height: var(--line-height-caption);
}

.wig-drawer__brandcard {
	margin-top: var(--space-5);
}

body.wig-drawer-open {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   5.2.4 移动端底部常驻条
   ═══════════════════════════════════════════════════════════ */

.wig-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-mobile-bar);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	height: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border-subtle);
	box-shadow: var(--shadow-3);
	transition: transform var(--dur-2) var(--ease-out);
}

.wig-mobile-bar--2 {
	grid-template-columns: repeat(2, 1fr);
}

.wig-mobile-bar.is-hidden {
	transform: translateY(100%);
}

.wig-mobile-bar__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	color: var(--color-text-1);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	border-right: 1px solid var(--color-border-subtle);
}

.wig-mobile-bar__item:last-child {
	border-right: 0;
}

.wig-mobile-bar__item svg {
	width: 20px;
	height: 20px;
}

.wig-mobile-bar__item--primary {
	background-color: var(--color-primary-600);
	color: var(--color-surface);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-semibold);
}

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

/* ═══════════════════════════════════════════════════════════
   首页 hero（全宽；内部左 5 栏文案 + 右 7 栏 3 帧淡入）
   ───────────────────────────────────────────────────────────
   DOM 顺序 = 移动端顺序：文案 → 细条 → 图。
   桌面用显式 grid 行列把细条放回文案正下方、图跨两行（design-spec §6.1 线框）。
   ═══════════════════════════════════════════════════════════ */

.wig-hero {
	padding-top: var(--space-5);
	padding-bottom: var(--space-8);
}

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

.wig-hero__eyebrow {
	margin-bottom: var(--space-3);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	letter-spacing: .04em;
	color: var(--color-text-2);
}

/* 三帧文案叠在同一格：只切 opacity，布局零位移（高度 = 最高的那一帧）。 */

.wig-hero__layers {
	display: grid;
}

.wig-hero__layer {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hero-frame-cross) var(--ease-in-out), visibility var(--hero-frame-cross);
}

.wig-hero__layer.is-active {
	opacity: 1;
	visibility: visible;
}

/* 第 2/3 帧是 <p>，与第 1 帧的 <h1> 必须完全同字号，否则切帧会跳。 */

.wig-hero__title {
	margin-bottom: var(--space-4);
	max-width: 20em;
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-h1);
	letter-spacing: -.01em;
}

.wig-hero__subtitle {
	margin-bottom: 0;
	max-width: 32em;
	color: var(--color-text-2);
}

.wig-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* 全帧共用：次按钮 / 「看这款」/ 信任行 —— 不随帧切换，所以不放进 layers。 */

.wig-hero__shared {
	margin-top: var(--space-4);
}

.wig-hero__secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.wig-hero__pick {
	font-size: var(--font-size-body-sm);
	color: var(--color-text-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--color-border-strong);
}

.wig-hero__pick:hover {
	color: var(--color-text-1);
}

.wig-hero__trust {
	margin-top: var(--space-3);
	font-size: var(--font-size-body-sm);
	color: var(--color-text-2);
}

.wig-hero__media {
	min-width: 0;
}

.wig-hero__caption {
	margin-top: var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-text-2);
}

/* 三帧全废：退纯文本，右图区不占位（网格自动变单列） */

.wig-hero__grid--text-only .wig-hero__copy {
	max-width: 46em;
}

/* —— 帧指示条：3 个 <button>，可见部分是里面的 <span> —— */

.wig-hero__bars {
	display: flex;
	align-items: center;
	gap: var(--hero-bar-gap);
}

.wig-hero__bar {
	display: block;
	padding: 20.5px 0; /* 命中区 56×44，条本身仍是 3px（禁止 scaleY 放大） */
	line-height: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.wig-hero__bar > span {
	display: block;
	width: var(--hero-bar-width);
	height: var(--hero-bar-height);
	border-radius: var(--radius-full);
	background-color: var(--color-border-strong);
	transition: background-color var(--dur-2) var(--ease-out);
}

.wig-hero__bar[aria-current="true"] > span,
.wig-hero__bar.is-active > span {
	background-color: var(--color-text-1);
}

.wig-hero__bar:hover > span {
	background-color: var(--color-text-2);
}

/* 暂停按钮：默认 sr-only，键盘聚焦时显形为 44×44 圆钮（WCAG 2.2.2） */

.wig-hero__pause {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wig-hero__pause:focus-visible {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 0 var(--space-4);
	clip-path: none;
	overflow: visible;
	border-radius: var(--radius-full);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-2);
	color: var(--color-text-1);
}

/* 轮播容器（hero 与图集共用） */

.wig-carousel__viewport {
	position: relative;
	aspect-ratio: var(--ratio-hero);
	border-radius: var(--radius-card);
	overflow: hidden;
	background-color: var(--color-skeleton);
}

.wig-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hero-frame-cross) var(--ease-in-out), visibility var(--hero-frame-cross);
}

.wig-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.wig-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%; /* 保人脸与发际线（design-spec §7.1） */
}

/* ── ≥768：图在右、细条回到文案下方；≥992：5/7 分栏 ── */

@media (min-width: 768px) {
	.wig-hero__grid {
		grid-template-columns: 5fr 7fr;
		grid-template-areas:
			"copy media"
			"bars media";
		grid-template-rows: auto auto;
		column-gap: var(--space-8);
		row-gap: var(--space-2);
		align-items: end;
	}

	.wig-hero__copy {
		grid-area: copy;
		align-self: end;
	}

	.wig-hero__bars {
		grid-area: bars;
	}

	.wig-hero__media {
		grid-area: media;
		align-self: center;
	}

	.wig-hero__grid--text-only {
		grid-template-columns: 1fr;
		grid-template-areas: "copy";
	}
}

@media (max-width: 767px) {
	.wig-hero__bar {
		padding: 20.5px 0;
	}

	.wig-hero__bar > span {
		width: var(--hero-bar-width-sm);
	}

	.wig-hero__title {
		max-width: 15em;
	}
}

/* 内容流（首页中栏）：1 大卡 + N 行卡 */

.wig-guide-feed {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   5.3 卡片家族
   ═══════════════════════════════════════════════════════════ */

.wig-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.wig-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: inherit;
	height: 100%;
	border-radius: var(--radius-card);
}

.wig-card__link:hover {
	color: inherit;
}

.wig-card__link:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
	border-radius: var(--radius-card);
}

.wig-card__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-surface-2);
}

.wig-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-2) var(--ease-out);
}

.wig-card__media--product {
	aspect-ratio: var(--ratio-product);
}

.wig-card__media--product img {
	object-position: 50% 35%;
}

.wig-card__media--grid {
	aspect-ratio: var(--ratio-product-grid);
}

.wig-card__media--grid img {
	object-position: 50% 45%;
}

.wig-card__media--cover {
	aspect-ratio: var(--ratio-cover);
}

.wig-card__media--row {
	aspect-ratio: var(--ratio-cover-row);
}

.wig-card__media--store {
	aspect-ratio: var(--ratio-store);
}

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

.wig-card__title {
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-1);
}

.wig-card__desc {
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
}

.wig-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.wig-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
}

.wig-card__meta-sep {
	color: var(--color-border);
}

/* 产品卡：1:1 图（总览/分类） */

.wig-card--product .wig-card__link {
	gap: var(--space-5);
}

/* 内容行卡 */

.wig-card--guide-row {
	padding: var(--space-4);
}

.wig-card--guide-row .wig-card__link {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-4);
	align-items: center;
}

.wig-card--guide-row .wig-card__meta {
	margin-top: var(--space-2);
	padding-top: 0;
	border-top: 0;
}

/* 门店卡 */

.wig-card--store .wig-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.wig-card--store .wig-card__actions .wig-btn {
	width: 100%;
	padding-inline: var(--space-3);
}

/* 悬停抬升：仅精准指针设备 */

@media (hover: hover) and (pointer: fine) {
	.wig-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-2);
	}

	.wig-card:hover .wig-card__media img {
		transform: scale(1.02);
	}
}

/* 数据块（2×2） */

.wig-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.wig-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
}

.wig-stat__value {
	font-family: var(--font-num);
	font-size: var(--font-size-num-xl);
	line-height: 1.05;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: var(--font-weight-medium);
	color: var(--color-text-1);
}

.wig-stat__rule {
	width: 24px;
	height: 2px;
	background-color: var(--color-gold-500);
	border-radius: var(--radius-full);
}

.wig-stat__label {
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-label);
	color: var(--color-text-2);
}

/* ═══════════════════════════════════════════════════════════
   5.5.1 标签 / 5.5.2 徽标
   ═══════════════════════════════════════════════════════════ */

.wig-tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--radius-xs);
	font-size: 13px;
	line-height: var(--line-height-label);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	white-space: nowrap;
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-tag--spec {
	background-color: var(--color-success-bg);
	color: var(--color-success-fg);
}

.wig-tag--cat {
	background-color: var(--color-primary-50);
	color: var(--color-primary-900);
}

.wig-tag--neutral {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-tag--gold {
	background-color: var(--color-gold-100);
	color: var(--color-gold-700);
}

.wig-badge {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-xs);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	background-color: var(--color-primary-50);
	color: var(--color-primary-700);
	z-index: 1;
}

/* 「新款」：中性深底。不能沿用默认款（primary-50 淡蓝）——
   卡片主色可被后台改成任意颜色，改深了「新款」会变成一坨，所以单独走中性色阶。 */
.wig-badge--new {
	background-color: var(--color-neutral-800);
	color: var(--color-text-inverse);
}

.wig-badge--hot {
	background-color: var(--color-danger-bg);
	color: var(--color-danger-fg);
}

.wig-badge--limited {
	background-color: var(--color-gold-100);
	color: var(--color-gold-700);
}

.wig-badge--cat {
	background-color: var(--color-primary-50);
	color: var(--color-primary-900);
}

/* ═══════════════════════════════════════════════════════════
   5.5.3 面包屑
   ═══════════════════════════════════════════════════════════ */

.wig-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-height: 20px;
	margin: var(--space-6) 0 var(--space-5);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	color: var(--color-text-3);
}

.wig-breadcrumb a {
	color: var(--color-text-3);
}

.wig-breadcrumb a:hover {
	color: var(--color-primary-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wig-breadcrumb__sep {
	color: var(--color-border);
	user-select: none;
}

.wig-breadcrumb [aria-current="page"] {
	color: var(--color-text-2);
}

.wig-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.wig-breadcrumb__ellipsis {
	display: none;
	color: var(--color-text-3);
}

@media (max-width: 575px) {
	.wig-breadcrumb__item--mid {
		display: none;
	}

	.wig-breadcrumb__ellipsis {
		display: inline;
	}
}

/* ═══════════════════════════════════════════════════════════
   5.5.4 分页
   ═══════════════════════════════════════════════════════════ */

.wig-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-10);
}

.wig-pagination__item,
.wig-pagination__link,
.wig-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-min);
	height: var(--tap-min);
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-subtle);
	background-color: var(--color-surface);
	color: var(--color-text-2);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
}

.wig-pagination__link:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-pagination__current {
	background-color: var(--color-primary-600);
	border-color: var(--color-primary-600);
	color: var(--color-surface);
}

.wig-pagination__item.is-disabled {
	background-color: var(--color-disabled-bg);
	color: var(--color-text-disabled);
	border-color: var(--color-border);
}

.wig-pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-6);
	color: var(--color-text-3);
}

/* ═══════════════════════════════════════════════════════════
   5.5.5 Tab（A 导航型 / B 真 Tab 共用视觉）
   ═══════════════════════════════════════════════════════════ */

.wig-tabs {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.wig-tabs--scroll {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-inline: var(--space-5);
	margin-inline: calc(var(--space-5) * -1);
}

.wig-tabs--scroll::-webkit-scrollbar {
	display: none;
}

.wig-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: var(--tap-min);
	padding: 0 var(--space-5);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-subtle);
	background-color: var(--color-surface);
	color: var(--color-text-2);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	scroll-snap-align: start;
}

.wig-tab:hover {
	background-color: var(--color-primary-50);
	border-color: var(--color-primary-200);
	color: var(--color-text-1);
}

.wig-tab[aria-current="page"],
.wig-tab[aria-selected="true"] {
	background-color: var(--color-primary-600);
	border-color: var(--color-primary-600);
	color: var(--color-surface);
}

.wig-tab[aria-selected="true"]:hover {
	color: var(--color-surface);
}

.wig-tabs__note {
	margin-top: calc(var(--space-5) * -1);
	margin-bottom: var(--space-7);
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
}

.wig-tabpanel[hidden] {
	display: none;
}

/* 左栏竖排列目导航（内容区首页） */

/* ═══════════════════════════════════════════════════════════
   手风琴（FAQ / 佩戴步骤）
   ═══════════════════════════════════════════════════════════ */

.wig-acc {
	display: flex;
	flex-direction: column;
}

.wig-acc__item {
	border-bottom: 1px solid var(--color-border-subtle);
}

.wig-acc__head {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	margin: 0;
}

.wig-acc__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	min-height: 56px;
	padding: var(--space-3) 0;
	text-align: left;
	color: var(--color-text-1);
	font-family: var(--font-display);
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	font-weight: var(--font-weight-bold);
}

.wig-acc__btn:hover {
	color: var(--color-primary-700);
}

.wig-acc__chev {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--color-text-3);
	transition: transform var(--dur-3) var(--ease-out);
}

.wig-acc__btn[aria-expanded="true"] .wig-acc__chev {
	transform: rotate(180deg);
}

.wig-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-in-out);
}

.wig-acc__panel > div {
	overflow: hidden;
}

.wig-acc__btn[aria-expanded="true"] + .wig-acc__panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.wig-acc__panel p,
.wig-acc__panel li {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-2);
	padding-bottom: var(--space-4);
}

/* 无 JS 时的原生 <details> 版手风琴 */

.wig-acc--native details {
	border-bottom: 1px solid var(--color-border-subtle);
}

.wig-acc--native summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 56px;
	padding: var(--space-3) 0;
	list-style: none;
	cursor: pointer;
	color: var(--color-text-1);
	font-family: var(--font-display);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-bold);
}

.wig-acc--native summary::-webkit-details-marker {
	display: none;
}

/* ═══════════════════════════════════════════════════════════
   5.4 表单
   ═══════════════════════════════════════════════════════════ */

.wig-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	max-width: 560px;
}

.wig-field {
	display: flex;
	flex-direction: column;
}

.wig-field__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-2);
}

.wig-field__req {
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-3);
}

.wig-field__input,
.wig-field__select,
.wig-field__textarea {
	width: 100%;
	min-height: var(--input-h);
	padding: 0 var(--space-4);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	color: var(--color-text-1);
	/* 16px 防 iOS 聚焦缩放（硬要求） */
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
	appearance: none;
}

.wig-field__textarea {
	min-height: 120px;
	padding: 12px var(--space-4);
	resize: vertical;
}

.wig-field__input::placeholder,
.wig-field__textarea::placeholder {
	color: var(--color-text-3);
}

.wig-field__input:hover,
.wig-field__select:hover,
.wig-field__textarea:hover {
	border-color: var(--color-text-3);
}

.wig-field__input:focus,
.wig-field__select:focus,
.wig-field__textarea:focus {
	border: 2px solid var(--color-primary-600);
	box-shadow: var(--shadow-focus);
	/* 边框加粗 1px，用 padding 抵掉，保证外部尺寸不变 */
	padding-left: calc(var(--space-4) - 1px);
	padding-right: calc(var(--space-4) - 1px);
	outline: none;
}

.wig-field__select {
	/* 下拉箭头：自绘，避免各系统默认箭头破坏 48px 一致性 */
	padding-right: var(--space-8);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 21px) 21px, calc(100% - 16px) 21px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.wig-field__help {
	margin-top: 6px;
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	color: var(--color-text-3);
}

.wig-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: 6px;
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-danger-fg);
}

.wig-field__error svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
}

.wig-field__error[hidden],
.wig-field__help[hidden] {
	display: none;
}

.wig-field--error .wig-field__input,
.wig-field--error .wig-field__select,
.wig-field--error .wig-field__textarea {
	border: 2px solid var(--color-danger-fg);
}

.wig-field__counter {
	margin-top: 6px;
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
	text-align: right;
}

/* 单选可选块 */

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

.wig-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--input-h);
	padding: 0 var(--space-4);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font-size: 15px;
	color: var(--color-text-2);
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.wig-choice:hover {
	background-color: var(--color-canvas);
	border-color: var(--color-text-3);
}

.wig-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.wig-choice__check {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--color-primary-600);
	opacity: 0;
}

.wig-choice:has(input:checked) {
	background-color: var(--color-primary-50);
	border: 2px solid var(--color-primary-600);
	color: var(--color-primary-700);
	font-weight: var(--font-weight-semibold);
	padding-left: calc(var(--space-4) - 1px);
}

.wig-choice:has(input:checked) .wig-choice__check {
	opacity: 1;
}

.wig-choice:has(input:focus-visible) {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* 勾选框 */

.wig-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	min-height: var(--tap-min);
	padding-top: var(--space-2);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
	cursor: pointer;
}

.wig-check input {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 1px;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	appearance: none;
	background-color: var(--color-surface);
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.wig-check input:hover {
	border-color: var(--color-text-3);
}

.wig-check input:checked {
	background-color: var(--color-primary-600);
	border-color: var(--color-primary-600);
	/* 勾号是 data URI 内的图形，无法引用 CSS 变量；颜色用 URL 编码写成恒白（勾永远在实色主色底上） */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}

.wig-check a {
	color: var(--color-primary-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 提示条 */

.wig-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	border: 1px solid transparent;
}

.wig-alert[hidden] {
	display: none;
}

.wig-alert svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
}

.wig-alert--danger {
	background-color: var(--color-danger-bg);
	border-color: var(--color-danger-fg);
	color: var(--color-danger-fg);
}

.wig-alert--info {
	background-color: var(--color-info-bg);
	border-color: var(--color-info-line);
	color: var(--color-info-fg);
}

.wig-alert--success {
	background-color: var(--color-success-bg);
	border-color: var(--color-success-line);
	color: var(--color-success-fg);
}

.wig-alert a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: var(--font-weight-semibold);
}

/* 成功态卡 */

.wig-form-success {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
}

.wig-form-success__icon {
	width: 48px;
	height: 48px;
	color: var(--color-success-line);
}

.wig-form-success__title {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	font-weight: var(--font-weight-bold);
}

.wig-form-success ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
}

.wig-form-success__foot {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
}

.wig-form-success__foot a {
	color: var(--color-primary-700);
	font-weight: var(--font-weight-semibold);
}

/* 蜜罐 */

.wig-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

/* 锁定城市（门店页进入时） */

.wig-field__locked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--input-h);
	padding: 0 var(--space-4);
	background-color: var(--color-surface-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
}

.wig-field__locked-value {
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-1);
}

.wig-form__legal {
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	color: var(--color-text-3);
}

@media (max-width: 575px) {
	/* 表单内按钮手机端全宽（design-spec §5.1） */
	.wig-form .wig-btn--primary,
	.wig-form .wig-btn--secondary {
		width: 100%;
	}
}

/* 表单弹层 */

.wig-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}

.wig-modal.is-open {
	display: flex;
}

.wig-modal__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--color-scrim);
	border: 0;
	width: 100%;
	cursor: pointer;
}

.wig-modal__panel {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 90dvh;
	overflow-y: auto;
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-3);
}

.wig-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.wig-modal__title {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	font-weight: var(--font-weight-bold);
}

.wig-modal__close {
	width: var(--tap-min);
	height: var(--tap-min);
	margin: -6px -6px 0 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	color: var(--color-text-2);
}

.wig-modal__close:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text-1);
}

.wig-modal__close svg {
	width: 20px;
	height: 20px;
}

body.wig-modal-open {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   5.7 表格
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   区块标题
   ═══════════════════════════════════════════════════════════ */

.wig-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-7);
}

.wig-section-head__title {
	margin: 0;
}

.wig-section-head__sub {
	margin-top: var(--space-2);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-3);
	max-width: 44em;
}

.wig-section-head__link {
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary-700);
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   品类入口瓦片
   ═══════════════════════════════════════════════════════════ */

.wig-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.wig-cat-tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	color: inherit;
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.wig-cat-tile:hover {
	color: inherit;
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

.wig-cat-tile__title {
	font-family: var(--font-display);
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-1);
}

.wig-cat-tile__desc {
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-3);
}

.wig-cat-tile--wide {
	grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════
   品牌资料卡（左栏）
   ═══════════════════════════════════════════════════════════ */

.wig-brandcard {
	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);
}

/* align-self 必留：父级 flex column 交叉轴默认 stretch，width:auto 会让 logo 被拉成卡片宽
 * （实测 380×32，390 档 310×32），SVG 再把它居中 → logo 居中、文字左对齐。删掉即错位。 */
.wig-brandcard__logo {
	height: 32px;
	width: auto;
	align-self: flex-start;
}

.wig-brandcard__tagline {
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
}

/* 服务承诺标签（brand_tag_1..3）
 * 3 条 → 等宽一行（flex: 1 1 0）；1–2 条 → max-content 左对齐不拉伸。
 * 空值由模板层直接不输出，所以这里不用写 :empty / 占位兜底。 */

.wig-brandcard__tags {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: var(--space-2);
}

.wig-brandcard__tag {
	flex: 0 0 auto;
	max-width: 100%;
	padding-inline: var(--space-2);
	font-size: var(--font-size-caption);
	line-height: 26px;
	color: var(--color-text-2);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: var(--color-surface-2);
	border-radius: var(--radius-pill);
}

.wig-brandcard__tags[data-count="3"] .wig-brandcard__tag {
	flex: 1 1 0;
	min-width: 0;
}

.wig-brandcard__stats {
	display: flex;
	gap: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-subtle);
}

.wig-brandcard__stat-value {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-size: var(--font-size-num);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-1);
}

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

.wig-brandcard__social {
	display: flex;
	gap: var(--space-2);
}

.wig-brandcard__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-2);
	color: var(--color-text-2);
}

.wig-brandcard__social a:hover {
	background-color: var(--color-primary-50);
	color: var(--color-primary-700);
}

.wig-brandcard__social svg {
	width: 20px;
	height: 20px;
}

/* 广告位 */

.wig-adslot {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	border-radius: var(--radius-card);
	background: var(--gradient-cta);
	color: var(--color-text-inverse);
}

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

.wig-adslot__text {
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-inverse-2);
}

/* 热销款小卡（右栏，形态与中栏 3 卡区分） */

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

.wig-hot__item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3) 0;
	color: inherit;
	border-bottom: 1px solid var(--color-border-subtle);
}

.wig-hot__item:last-child {
	border-bottom: 0;
}

.wig-hot__item:hover {
	color: inherit;
}

.wig-hot__thumb {
	aspect-ratio: var(--ratio-product);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-skeleton);
}

.wig-hot__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.wig-hot__name {
	display: block;
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	color: var(--color-text-1);
}

.wig-hot__meta {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-caption);
	color: var(--color-text-3);
}

/* ═══════════════════════════════════════════════════════════
   CTA 横幅（深墨）
   ═══════════════════════════════════════════════════════════ */

.wig-cta-band {
	background: var(--gradient-cta);
	color: var(--color-text-inverse);
	padding-block: var(--space-11);
}

.wig-cta-band__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: flex-start;
}

.wig-cta-band__title {
	color: var(--color-text-inverse);
	font-family: var(--font-display);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	font-weight: var(--font-weight-bold);
}

.wig-cta-band__text {
	color: var(--color-text-inverse-2);
	font-size: var(--font-size-body-lg);
	line-height: 1.75;
	max-width: 40em;
}

.wig-cta-band__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   5.5.6 单品悬浮预约条
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   回到顶部
   ═══════════════════════════════════════════════════════════ */

.wig-back-top {
	position: fixed;
	right: var(--space-6);
	bottom: var(--space-11);
	z-index: var(--z-booking-bar);
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-text-1);
	box-shadow: var(--shadow-2);
	opacity: 0;
	transform: scale(.9);
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.wig-back-top.is-visible {
	display: inline-flex;
	opacity: 1;
	transform: scale(1);
}

.wig-back-top svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 767px) {
	.wig-back-top {
		bottom: calc(var(--mobile-bar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px));
	}
}

/* ═══════════════════════════════════════════════════════════
   空态
   ═══════════════════════════════════════════════════════════ */

.wig-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-10) var(--space-5);
	text-align: center;
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
}

.wig-empty__title {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	font-weight: var(--font-weight-bold);
}

.wig-empty__text {
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
	max-width: 40em;
}

/* ═══════════════════════════════════════════════════════════
   产品图集
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   适合 / 不适合双栏
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   价格位（唯一出口 wig_price_note）
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   静态地图 / 门店
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Hero 双 CTA / 页面导语 / 文章元信息
   ═══════════════════════════════════════════════════════════ */

/* 图注 / 图片占位（禁灰框灰字，用工艺渐变） */

.wig-media-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	height: 100%;
	background: var(--gradient-placeholder);
	color: var(--color-text-2);
	text-align: center;
	padding: var(--space-4);
}

.wig-media-placeholder svg {
	width: 48px;
	height: 48px;
	color: var(--color-border-strong);
}

.wig-media-placeholder span {
	font-size: var(--font-size-caption);
	color: var(--color-text-1);
}

.wig-media-placeholder--cover {
	background: var(--gradient-cat-select);
}

/* ═══════════════════════════════════════════════════════════
   滚动入场（reveal.js；reduced-motion 时不加类，元素直接可见）
   ═══════════════════════════════════════════════════════════ */

/* 只有 main.js 成功执行（给 <html> 加了 .wig-js）时才隐藏待入场元素：
 * JS 被拦/报错时内容照常可见，不会出现「整段空白」。 */

.wig-js .wig-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}

.wig-js .wig-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.wig-js .wig-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* 内容区首页左栏：竖排列目下的说明小字 */

/* ═══════════════════════════════════════════════════════════
   文章详情（single.php · design-spec §6.7）
   ───────────────────────────────────────────────────────────
   整列限 --container-prose（720），内文段落再限 660（design-spec §3.2）。
   ═══════════════════════════════════════════════════════════ */

/* 文内款式卡：单独一块，不挤在段落之间 */

/* 文末 CTA（措辞与文章分类挂钩） */

/* 上下篇 */

/* ═══════════════════════════════════════════════════════════
   搜索表单 / 搜索出口 / 404（search.php、404.php）
   ═══════════════════════════════════════════════════════════ */

.wig-searchform {
	display: flex;
	gap: var(--space-2);
	max-width: 560px;
	margin-top: var(--space-5);
}

.wig-searchform__input {
	flex: 1;
	min-width: 0;
	height: var(--tap-min);
	padding: 0 var(--space-4);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-strong);
	background-color: var(--color-surface);
	color: var(--color-text-1);
	font-size: var(--font-size-body);
}

.wig-searchform__input::placeholder {
	color: var(--color-text-2);
}

.wig-searchform__input:hover {
	border-color: var(--color-text-2);
}

.wig-searchform__input:focus {
	border-color: var(--color-focus);
}

.wig-search-exits {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	max-width: 560px;
}

@media (min-width: 576px) {
	.wig-search-exits {
		grid-template-columns: 1fr 1fr;
	}
}

.wig-404 {
	max-width: 640px;
	padding-block: var(--space-10);
}

.wig-404__code {
	font-family: var(--font-display);
	font-size: var(--font-size-num-xl);
	color: var(--color-text-3);
	line-height: 1;
}

.wig-404__links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

@media (min-width: 576px) {
	.wig-404__links {
		grid-template-columns: 1fr 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════
   表单错误态 / 成功态（lead-form.js 只加类，不写内联样式）
   ═══════════════════════════════════════════════════════════ */

[data-field].has-error .wig-field__input,
[data-field].has-error .wig-field__select,
[data-field].has-error .wig-field__textarea,
.wig-field__input[aria-invalid="true"],
.wig-field__select[aria-invalid="true"],
.wig-field__textarea[aria-invalid="true"] {
	border-color: var(--color-danger-line);
	background-color: var(--color-danger-bg);
}

.wig-form.is-success > :not(.wig-form-success) {
	display: none;
}

.wig-form-success[hidden] {
	display: none;
}

/* ═══════════════════════════════════════════════════════════
   页面级补漏：模板用到、上面分节里漏定义的类
   （做「模板类名 ↔ CSS 定义」比对时发现的，缺了不会报错，只会静默少一点间距 / 二维码撑满弹层）
   ═══════════════════════════════════════════════════════════ */

/* 门店总览：按城市分组，组与组之间要有明显留白，否则 5 个城市连成一片 */

/* 锚点跳转（#wig-store-beijing）时标题别被吸顶导航盖住 */

/* 微信二维码弹层：面板收窄成竖版，二维码固定 240 居中，避免被 max-width:640 拉成一条 */

.wig-modal__panel--qr {
	max-width: 360px;
	text-align: center;
}

.wig-modal__qr {
	display: block;
	width: 240px;
	height: 240px;
	max-width: 100%;
	margin: var(--space-4) auto 0;
	border-radius: var(--radius-md);
}

/* 单品图集根节点：主图 + 缩略图条之间的固定间距 */

/* 首页 FAQ 小卡：把「看全部问题」压到底部，和相邻热销卡的下沿对齐 */

.wig-faq-teaser {
	display: flex;
	flex-direction: column;
}

.wig-faq-teaser > .wig-btn {
	margin-top: auto;
}

/* FAQ 变体不参与卡片 hover 抬升（它不是链接） */

.wig-card--faq {
	transition: none;
}

/* 电话文本：门店卡与联系页共用（联系页不加载 page-store.css，所以这两条必须留在常驻文件里） */

.wig-store-card__phone {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-1);
}

.wig-store-card__phone--lg {
	font-size: var(--font-size-body-lg);
}