@charset "UTF-8";
/* 手机端底部导航 + 微信弹层：独立文件，内页未引用 style.css 时仍生效 */

.mob-bottom-nav {
	display: none;
}

.mob-consent-manage {
	display: none;
}

/* 产品要求隐藏独立悬浮入口；属性选择器确保后续紧凑端组件样式不会解除 hidden。 */
.mob-consent-manage[hidden] {
	display: none;
}

@media (max-width: 833px) {
	:root {
		/* Dock 尺寸与页面避让在根节点共享，确保 html 和 body 内的悬浮消费者都能跟随实际占位。 */
		--mob-nav-dock-height: 72px;
		--mob-nav-dock-gap: 8px;
		--mob-nav-page-reserve: calc(var(--mob-nav-dock-height) + var(--mob-nav-dock-gap) + env(safe-area-inset-bottom, 0px));
	}
	body {
		/* 底部固定导航覆盖在正文上方，body 统一留出等高空间，避免页尾内容被遮挡或重复累计。 */
		padding-bottom: var(--mob-nav-page-reserve);
	}
	/* 页面 CSS 可能在更晚位置覆盖 body 留白，此处提高具体性统一恢复 Dock 的 safe-area 避让；
	   商品详情页继续由购买栏接管。 */
	body.custom-override:not(.product-detail-page) {
		padding-bottom: var(--mob-nav-page-reserve);
	}
	.footer-consent-manage {
		/* 固定底栏存在时，浏览器自动滚动到该按钮需预留可点击空间 */
		scroll-margin-bottom: calc(var(--mob-nav-page-reserve) + 52px);
	}
	.mob-bottom-nav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--dm-z-float-bar, 10040);
		height: var(--mob-nav-page-reserve);
		box-sizing: border-box;
		padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(var(--mob-nav-dock-gap) + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
		background: transparent;
		box-shadow: none;
		-webkit-tap-highlight-color: transparent;
	}
	/* 保留独立入口的可恢复组件样式，当前由 hidden 属性保持不显示。 */
	.mob-consent-manage {
		position: fixed;
		right: max(16px, env(safe-area-inset-right, 0px));
		bottom: calc(var(--mob-nav-page-reserve) + 16px);
		z-index: var(--dm-z-float-bar, 10040);
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(29, 29, 31, 0.12);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: #272b30;
		box-shadow: 0 6px 18px rgba(27, 31, 36, 0.14);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.mob-consent-manage svg {
		width: 22px;
		height: 22px;
		display: block;
	}
	.mob-consent-manage:active {
		transform: scale(0.94);
	}
	.mob-consent-manage:focus-visible {
		outline: 2px solid var(--dm-mobile-nav-active, var(--husir-orange, #c63f00));
		outline-offset: 3px;
	}
	body.product-detail-page.custom-override .mob-consent-manage {
		bottom: calc(var(--vp-mobile-buybar-h, 76px) + 16px + env(safe-area-inset-bottom, 0px));
	}
	.mob-bottom-nav__inner {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		gap: 2px;
		height: 100%;
		max-width: 100%;
		border: 1px solid rgba(255, 255, 255, 0.78);
		border-radius: 28px;
		background: rgba(255, 255, 255, 0.76);
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		backdrop-filter: saturate(180%) blur(24px);
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset,
			0 -1px 0 rgba(24, 24, 27, 0.05) inset,
			0 10px 34px rgba(27, 31, 36, 0.16),
			0 2px 8px rgba(27, 31, 36, 0.08);
	}
	.mob-bottom-nav__inner::before {
		content: "";
		position: absolute;
		inset: 0 1px auto;
		z-index: 0;
		height: 48%;
		border-radius: 27px 27px 45% 45%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0));
		pointer-events: none;
	}
	.mob-bottom-nav__item {
		position: relative;
		z-index: 1;
		flex: 1;
		min-width: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4px 1px 3px;
		color: #272b30;
		font: 500 13px/1.15 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
		transition: color 0.2s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.mob-bottom-nav__item:active {
		transform: scale(0.96);
	}
	.mob-bottom-nav__item:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -4px;
		border-radius: 22px;
	}
	.mob-bottom-nav__item--btn {
		border: 0;
		background: none;
		cursor: pointer;
		font-family: inherit;
		color: inherit;
		padding-left: 0;
		padding-right: 0;
		margin: 0;
		width: auto;
		-webkit-appearance: none;
		appearance: none;
	}
	.mob-bottom-nav__iconWrap {
		width: 42px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 不用 transparent border：玻璃底栏 + 全局/主题 border-color 过渡
		   会把 transparent 插成近黑，刷新时五图标同时“描黑边”。
		   激活环改用 box-shadow，从根上消灭 border-color 插值。 */
		border: 0;
		border-radius: 16px;
		background: transparent;
		margin-bottom: 2px;
		box-shadow: none;
		transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.mob-bottom-nav__icon--svg svg {
		width: 24px;
		height: 24px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
		display: block;
	}
	.mob-bottom-nav__icon--wechat svg {
		fill: currentColor;
		stroke: none;
	}
	.mob-bottom-nav__item--active .mob-bottom-nav__iconWrap {
		background: rgba(198, 63, 0, 0.11);
		box-shadow: 0 0 0 1px rgba(198, 63, 0, 0.22),
			0 1px 0 rgba(255, 255, 255, 0.86) inset,
			0 -1px 0 rgba(198, 63, 0, 0.08) inset,
			0 5px 14px rgba(198, 63, 0, 0.13);
	}
	.mob-bottom-nav__item--active:active .mob-bottom-nav__iconWrap {
		transform: scale(0.94);
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
			0 2px 8px rgba(198, 63, 0, 0.1);
	}
	.mob-bottom-nav__item--active {
		color: var(--dm-mobile-nav-active, var(--husir-orange, #c63f00));
		font-weight: 600;
	}
	.mob-bottom-nav__item--active .mob-bottom-nav__label {
		color: var(--dm-mobile-nav-active, var(--husir-orange, #c63f00));
	}

	.mob-copy-buffer {
		position: fixed;
		left: -9999px;
		top: 0;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.mob-bottom-nav__inner {
			background: rgba(255, 255, 255, 0.96);
		}
	}
}

/* 手机竖屏收紧 Dock 功能组；外壳圆角按 iPhone 屏幕边角比例处理。 */
@media (max-width: 599px) {
	.mob-bottom-nav {
		padding-left: max(18px, env(safe-area-inset-left, 0px));
		padding-right: max(18px, env(safe-area-inset-right, 0px));
	}
	.mob-bottom-nav__inner {
		justify-content: center;
		gap: 0;
		border-radius: 32px;
	}
	.mob-bottom-nav__inner::before {
		border-radius: 31px 31px 45% 45%;
	}
	.mob-bottom-nav__item {
		flex: 0 1 72px;
	}
}

/* 竖屏平板将 Dock 工具条与点击区按 1.3 倍扩大，较窄平板按视口限宽避免横向溢出。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
	:root {
		--mob-nav-dock-height: 93.6px;
	}
	.mob-bottom-nav__inner {
		width: min(580px, calc(100vw - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
		max-width: 100%;
		margin: 0 auto;
		gap: 2.6px;
		border-radius: 36.4px;
	}
	.mob-bottom-nav__inner::before {
		border-radius: 35.1px 35.1px 45% 45%;
	}
	.mob-bottom-nav__item {
		padding: 5.2px 1.3px 3.9px;
		font-size: 16.9px;
	}
	.mob-bottom-nav__item:focus-visible {
		outline-offset: -5.2px;
		border-radius: 28.6px;
	}
	.mob-bottom-nav__iconWrap {
		width: 54.6px;
		height: 49.4px;
		margin-bottom: 2.6px;
		border-radius: 20.8px;
	}
	.mob-bottom-nav__icon--svg svg {
		width: 31.2px;
		height: 31.2px;
	}
	.mob-consent-manage {
		right: max(24px, env(safe-area-inset-right, 0px));
		bottom: calc(var(--mob-nav-page-reserve) + 20px);
		width: 54.6px;
		height: 54.6px;
	}
	.mob-consent-manage svg {
		width: 27px;
		height: 27px;
	}
}

@media (max-width: 380px) {
	.mob-bottom-nav__item {
		font-size: 12px;
	}
	.mob-bottom-nav__iconWrap {
		width: 36px;
		height: 36px;
		border-radius: 15px;
	}
	.mob-bottom-nav__icon--svg svg {
		width: 22px;
		height: 22px;
	}
	.mob-consent-manage {
		width: 40px;
		height: 40px;
	}
	.mob-consent-manage svg {
		width: 20px;
		height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mob-bottom-nav__item,
	.mob-bottom-nav__iconWrap {
		transition: none;
	}
	.mob-bottom-nav__item:active,
	.mob-bottom-nav__item--active:active .mob-bottom-nav__iconWrap {
		transform: none;
	}
}

/* ===== 暗黑模式切换图标样式 ===== */
/* 图标表示"当前状态"：日间显示太阳、暗黑显示月亮。
   重复 class 写法提升具体性至 (0,3,0)，覆盖 about-showcase-critical.css 的
   .custom-override .mob-bottom-nav__icon--svg svg { display:block } (0,2,1)，
   避免两个图标同时显示。 */
.mob-bottom-nav__icon--svg .mob-dark-icon-moon.mob-dark-icon-moon {
	display: none;
}
.mob-bottom-nav__icon--svg .mob-dark-icon-sun {
	display: block;
}

/* 暗黑模式下显示月亮图标，隐藏太阳图标。
   具体性需高于上面的日间默认规则 (0,3,0)，故同样用重复 class。 */
html.husir-dark .mob-bottom-nav__icon--svg .mob-dark-icon-moon.mob-dark-icon-moon {
	display: block;
}
html.husir-dark .mob-bottom-nav__icon--svg .mob-dark-icon-sun {
	display: none;
}

/* 暗黑模式下底部导航栏样式 */
html.husir-dark .mob-bottom-nav {
	/* 父容器覆盖 body 的 Dock 避让区，菜单胶囊继续保留自身玻璃效果。 */
	background: transparent;
	box-shadow: none;
}
html.husir-dark .mob-bottom-nav__inner {
	border-color: rgba(255, 255, 255, 0.16);
	background: var(--dm-mobile-nav-bg);
	box-shadow: none;
}
html.husir-dark .mob-bottom-nav__inner::before {
	background: transparent;
}
html.husir-dark .mob-bottom-nav__item {
	color: var(--dm-mobile-nav-text);
}
html.husir-dark .mob-bottom-nav__item--active {
	color: var(--dm-mobile-nav-active);
}
html.husir-dark .mob-bottom-nav__item--active .mob-bottom-nav__iconWrap {
	/* iOS 26 Liquid Glass：激活项用半透明珊瑚玻璃层，保留细高光和柔和浮起感。 */
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 105, 72, 0.2) 58%, rgba(255, 255, 255, 0.08));
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26),
		0 1px 0 rgba(255, 255, 255, 0.28) inset,
		0 -1px 0 rgba(0, 0, 0, 0.22) inset,
		0 6px 18px rgba(255, 105, 72, 0.18);
}
html.husir-dark .mob-consent-manage {
	border-color: rgba(255, 255, 255, 0.16);
	background: var(--dm-bg-elevated, #2a2a2a);
	color: var(--dm-mobile-nav-text, #f5f5f7);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* 系统暗黑分支（跟随 OS，html 无 husir-dark/husir-light 类时生效）。
   与上面 html.husir-dark 手动分支对称，避免系统暗黑下移动底部导航丢色。
   token --dm-mobile-* 已在 dark-mode-core.css 两分支定义。 */
@media (prefers-color-scheme: dark) {
	html:not(.husir-light) .mob-bottom-nav__icon--svg .mob-dark-icon-moon.mob-dark-icon-moon {
		display: block;
	}
	html:not(.husir-light) .mob-bottom-nav__icon--svg .mob-dark-icon-sun {
		display: none;
	}
	html:not(.husir-light) .mob-bottom-nav {
		background: transparent;
		box-shadow: none;
	}
	html:not(.husir-light) .mob-bottom-nav__inner {
		border-color: rgba(255, 255, 255, 0.16);
		background: var(--dm-mobile-nav-bg);
		box-shadow: none;
	}
	html:not(.husir-light) .mob-bottom-nav__inner::before {
		background: transparent;
	}
	html:not(.husir-light) .mob-bottom-nav__item {
		color: var(--dm-mobile-nav-text);
	}
	html:not(.husir-light) .mob-bottom-nav__item--active {
		color: var(--dm-mobile-nav-active);
	}
	html:not(.husir-light) .mob-bottom-nav__item--active .mob-bottom-nav__iconWrap {
		/* 与手动暗黑分支保持同一套 iOS 26 Liquid Glass 激活态。 */
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 105, 72, 0.2) 58%, rgba(255, 255, 255, 0.08));
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26),
			0 1px 0 rgba(255, 255, 255, 0.28) inset,
			0 -1px 0 rgba(0, 0, 0, 0.22) inset,
			0 6px 18px rgba(255, 105, 72, 0.18);
	}
	html:not(.husir-light) .mob-consent-manage {
		border-color: rgba(255, 255, 255, 0.16);
		background: var(--dm-bg-elevated, #2a2a2a);
		color: var(--dm-mobile-nav-text, #f5f5f7);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	}
}