/* ============================================================
   旧好 · 暗色商城  —  配色与组件
   覆盖 Storefront 默认的亮色配色
   ============================================================ */

:root {
	--jh-bg:          #0a0c11;
	--jh-bg-elev:     #10131a;
	--jh-card:        #151922;
	--jh-card-hover:  #1b2130;
	--jh-border:      #232a38;
	--jh-border-soft: #1b212c;

	--jh-text:        #e9ecf3;
	--jh-text-dim:    #98a2b6;
	--jh-text-faint:  #6b7488;

	--jh-accent:      #4d8dff;
	--jh-accent-soft: #1e3a6b;
	--jh-accent-2:    #8b5cff;
	--jh-ok:          #2ecc8f;
	--jh-sale:        #ff5c7c;
	--jh-warn:        #ffb020;

	--jh-radius:      14px;
	--jh-radius-sm:   9px;
	--jh-shadow:      0 4px 24px rgba(0,0,0,.45);
	--jh-shadow-lg:   0 18px 48px rgba(0,0,0,.6);
	--jh-glow:        0 0 0 1px rgba(77,141,255,.35), 0 0 28px rgba(77,141,255,.18);
}

/* ---------- 基础 ---------- */

html { background: var(--jh-bg); }

body.jh-dark,
body.jh-dark .site {
	background: var(--jh-bg) !important;
	color: var(--jh-text);
	font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
	             "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont,
	             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.jh-dark .site-content { background: var(--jh-bg); }

/* 背景氛围光 */
body.jh-dark::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(900px 500px at 12% -8%, rgba(77,141,255,.13), transparent 60%),
		radial-gradient(760px 460px at 88% 4%, rgba(139,92,255,.11), transparent 62%);
}
body.jh-dark .site { position: relative; z-index: 1; }

/* ---------- 文字 ---------- */

body.jh-dark h1, body.jh-dark h2, body.jh-dark h3,
body.jh-dark h4, body.jh-dark h5, body.jh-dark h6,
body.jh-dark .entry-title, body.jh-dark .page-title {
	color: var(--jh-text);
}

body.jh-dark a { color: var(--jh-accent); }
body.jh-dark a:hover { color: #7aa9ff; }

body.jh-dark p, body.jh-dark li, body.jh-dark .entry-content {
	color: var(--jh-text-dim);
}

body.jh-dark blockquote {
	background: var(--jh-card);
	border-left: 3px solid var(--jh-accent);
	color: var(--jh-text-dim);
}

/* ---------- 顶部 ---------- */

body.jh-dark .site-header {
	background: rgba(10,12,17,.82) !important;
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--jh-border-soft);
}

/*
 * 注意：这里**不能**把 .site-title a 一起写上 background: transparent !important。
 *
 * motion.css 里给站名做了渐变文字（background: linear-gradient(...) +
 * background-clip: text + -webkit-text-fill-color: transparent）。
 * 本文件的 !important 会把那个渐变压掉，而 -webkit-text-fill-color: transparent
 * 没有竞争对手、照常生效 —— 结果是「透明的文字 + 透明的背景」，站名整个看不见。
 *
 * 所以背景只清导航项，站名的背景交给 motion.css 的渐变。
 */
body.jh-dark .storefront-primary-navigation,
body.jh-dark .main-navigation ul.menu > li > a {
	background: transparent !important;
}

body.jh-dark .storefront-primary-navigation,
body.jh-dark .main-navigation ul.menu > li > a,
body.jh-dark .site-branding .site-title a {
	color: var(--jh-text) !important;
}

body.jh-dark .main-navigation ul.menu > li > a:hover,
body.jh-dark .main-navigation ul.menu > li.current-menu-item > a {
	color: var(--jh-accent) !important;
}

body.jh-dark .main-navigation ul.menu ul.sub-menu {
	background: var(--jh-card) !important;
	border: 1px solid var(--jh-border);
	box-shadow: var(--jh-shadow);
}
body.jh-dark .main-navigation ul.menu ul.sub-menu a { color: var(--jh-text-dim) !important; }

/* 顶部工具条 */
body.jh-dark .storefront-secondary-navigation,
body.jh-dark .site-header .secondary-navigation {
	background: transparent !important;
	border-color: var(--jh-border-soft) !important;
}
body.jh-dark .secondary-navigation a { color: var(--jh-text-faint) !important; }

/* ---------- 页头 Logo ----------
   限制高度，避免原图尺寸直接把页头撑高 */
body.jh-dark .site-branding .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
body.jh-dark .site-branding .custom-logo {
	max-height: 40px !important;
	max-width: 40px !important;
	width: auto !important;
	height: auto !important;
	transition: transform .45s cubic-bezier(.2,.8,.25,1), filter .45s ease;
}
body.jh-dark .site-branding .custom-logo-link:hover .custom-logo {
	transform: scale(1.06) rotate(-3deg);
	filter: drop-shadow(0 0 14px rgba(77,141,255,.45));
}

/* ---------- 分类卡片 ----------
   之前分类名是「大字压在图上」，既难看又没动效。
   改成：图为主、名称做成底部标签，悬停时整卡抬升 + 图片放大 + 标签变色。 */
body.jh-dark ul.products li.product-category {
	position: relative;
	overflow: hidden;
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	padding: 0;
}

body.jh-dark ul.products li.product-category > a {
	display: block;
	position: relative;
	text-decoration: none;
}

/* 图片 */
body.jh-dark ul.products li.product-category img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: transform .7s cubic-bezier(.2,.8,.25,1), filter .5s ease;
	filter: saturate(.92) brightness(.92);
}

/* 图片上的渐变遮罩 */
body.jh-dark ul.products li.product-category > a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(8,10,16,.86) 100%);
	transition: opacity .45s ease;
	pointer-events: none;
}

/* 分类名：底部小标签，不再是大字 */
body.jh-dark ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	margin: 0 !important;
	padding: 14px 16px !important;
	background: transparent !important;
	color: var(--jh-text) !important;
	font-size: 14.5px !important;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 1.35;
	text-align: left;
	transform: translateY(0);
	transition: color .35s ease, transform .45s cubic-bezier(.2,.8,.25,1);
}
body.jh-dark ul.products li.product-category .woocommerce-loop-category__title .count {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--jh-text-faint);
	opacity: 1;
	transition: color .35s ease;
}

/* 底部扫出的强调线 */
body.jh-dark ul.products li.product-category > a::before {
	content: "";
	position: absolute;
	left: 16px; bottom: 10px;
	width: 26px; height: 2px;
	z-index: 3;
	border-radius: 2px;
	background: linear-gradient(90deg, #4d8dff, #8b5cff);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s cubic-bezier(.16,.84,.32,1);
	pointer-events: none;
}

/* 悬停 */
body.jh-dark ul.products li.product-category:hover img {
	transform: scale(1.10);
	filter: saturate(1.05) brightness(1);
}
body.jh-dark ul.products li.product-category:hover
	.woocommerce-loop-category__title {
	color: #8fb6ff !important;
}
body.jh-dark ul.products li.product-category:hover
	.woocommerce-loop-category__title .count {
	color: #a8c8ff;
}
body.jh-dark ul.products li.product-category:hover > a::before {
	transform: scaleX(1.6);
}

/* 入场：分类卡逐个浮现 */
.jh-stagger.jh-in > li.product-category {
	animation: jh-rise .72s cubic-bezier(.16,.84,.32,1) forwards;
}

/* ---------- 商品卡片 ---------- */

body.jh-dark ul.products li.product {
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	overflow: hidden;
	padding: 0 0 16px;
	/*
	 * 只过渡 transform 和 box-shadow。
	 *
	 * 之前还带一条 border-color —— 悬停时同一张卡同时动「位移 + 阴影 +
	 * 描边色 + 图片缩放」四种，喧宾夺主，也多一次每帧重绘。
	 * 描边色那条收益最小，去掉，留下「抬起来 + 亮起来 + 图放大」这一个连贯动作。
	 */
	transition: transform .38s cubic-bezier(.2,.8,.25,1),
	            box-shadow .38s cubic-bezier(.2,.8,.25,1);
}

body.jh-dark ul.products li.product:hover {
	transform: translateY(-7px);
	box-shadow: var(--jh-shadow-lg), var(--jh-glow);
}

body.jh-dark ul.products li.product > a {
	display: block;
	overflow: hidden;
}
body.jh-dark ul.products li.product img {
	display: block;
	width: 100%;
	margin: 0;
	border-radius: 0;
	transition: transform .65s cubic-bezier(.2,.8,.25,1);
}
body.jh-dark ul.products li.product:hover img { transform: scale(1.07); }

body.jh-dark ul.products li.product .woocommerce-loop-product__title,
body.jh-dark ul.products li.product h2,
body.jh-dark ul.products li.product h3 {
	color: var(--jh-text) !important;
	padding: 14px 16px 0;
	font-size: 15px;
	line-height: 1.5;
	min-height: 62px;
}

body.jh-dark ul.products li.product .price {
	color: var(--jh-accent) !important;
	padding: 6px 16px 0;
	font-size: 19px;
	font-weight: 700;
}
body.jh-dark ul.products li.product .price del { color: var(--jh-text-faint); font-size: 13px; font-weight: 400; }
body.jh-dark ul.products li.product .price ins { text-decoration: none; color: var(--jh-sale); }

body.jh-dark ul.products li.product .button,
body.jh-dark ul.products li.product .added_to_cart {
	margin: 12px 16px 0;
	width: calc(100% - 32px);
}

/* 成色 / 议价 徽章 */
body.jh-dark .jh-badges {
	display: flex;
	gap: 6px;
	padding: 10px 16px 0;
	flex-wrap: wrap;
}
body.jh-dark .jh-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.6;
}
body.jh-dark .jh-badge--cond {
	background: rgba(77,141,255,.14);
	color: #8fb6ff;
	border: 1px solid rgba(77,141,255,.28);
}
body.jh-dark .jh-badge--nego {
	background: rgba(46,204,143,.13);
	color: #6ee7b7;
	border: 1px solid rgba(46,204,143,.26);
}
body.jh-dark .jh-badge--fixed {
	background: rgba(152,162,182,.12);
	color: var(--jh-text-dim);
	border: 1px solid var(--jh-border);
}

/* ---------- 按钮 ---------- */

body.jh-dark button,
body.jh-dark input[type="submit"],
body.jh-dark .button,
body.jh-dark .added_to_cart,
body.jh-dark #respond input#submit,
body.jh-dark .woocommerce a.button,
body.jh-dark .woocommerce button.button,
body.jh-dark .woocommerce input.button {
	background: linear-gradient(135deg, var(--jh-accent), var(--jh-accent-2)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--jh-radius-sm) !important;
	font-weight: 600;
	letter-spacing: .3px;
	transition: transform .22s ease, box-shadow .3s ease, filter .3s ease;
}

body.jh-dark .button:hover,
body.jh-dark .woocommerce a.button:hover,
body.jh-dark .woocommerce button.button:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 8px 24px rgba(77,141,255,.34);
}

/* ---------- 顶部购物车浮层 ----------
   浮层是绝对定位的，会盖到下面的信任条上。
   抬高层级并加实底背景 + 阴影，避免看起来「两个东西重在一起」。
*/
body.jh-dark .site-header-cart .widget_shopping_cart_content {
	position: absolute;
	z-index: 999;
	background: var(--jh-card);
	border: 1px solid var(--jh-border);
	border-radius: var(--jh-radius);
	box-shadow: var(--jh-shadow-lg);
	padding: 18px;
	min-width: 320px;
}
body.jh-dark .site-header-cart .widget_shopping_cart_content::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 26px;
	width: 12px; height: 12px;
	background: var(--jh-card);
	border-left: 1px solid var(--jh-border);
	border-top: 1px solid var(--jh-border);
	transform: rotate(45deg);
}
body.jh-dark .site-header-cart:hover .widget_shopping_cart_content { z-index: 1000; }

/* 信任条本身不再与导航抢层级 */
body.jh-dark .jh-trust { position: relative; z-index: 1; }

/* ---------- 信任条 ---------- */

.jh-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1200px;
	/* 与上方导航拉开距离，之前 0 会让两块贴在一起 */
	margin: 52px auto 48px;
	padding: 0 20px;
}

.jh-trust__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(160deg, rgba(32,38,54,.72), rgba(18,22,31,.86));
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	padding: 18px 20px;
	overflow: hidden;
	transition: transform .38s cubic-bezier(.2,.8,.25,1),
	            border-color .38s ease,
	            box-shadow .38s ease;
}
.jh-trust__item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(220px circle at 12% 0%, rgba(77,141,255,.14), transparent 62%);
	opacity: 0;
	transition: opacity .38s ease;
	pointer-events: none;
}
.jh-trust__item:hover {
	transform: translateY(-4px);
	border-color: var(--jh-accent-soft);
	box-shadow: var(--jh-shadow-lg), 0 0 24px rgba(77,141,255,.14);
}
.jh-trust__item:hover::before { opacity: 1; }

/* 图标容器：让 SVG 有个统一的承载块，视觉上更稳 */
.jh-trust__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: linear-gradient(150deg, rgba(77,141,255,.22), rgba(139,92,255,.14));
	border: 1px solid rgba(77,141,255,.24);
	color: #8fb6ff;
	transition: transform .38s cubic-bezier(.2,.8,.25,1), color .3s ease;
}
.jh-trust__item:hover .jh-trust__icon {
	transform: scale(1.08) rotate(-4deg);
	color: #a8c8ff;
}
.jh-icon { display: block; }

.jh-trust__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.jh-trust__text strong {
	color: var(--jh-text);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .3px;
	line-height: 1.4;
}
.jh-trust__text em {
	font-style: normal;
	color: var(--jh-text-faint);
	font-size: 12.5px;
	line-height: 1.5;
	margin-top: 3px;
}

@media (max-width: 1024px) { .jh-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.jh-trust { grid-template-columns: 1fr; gap: 12px; }
	.jh-trust__item { padding: 14px 16px; }
	.jh-trust__icon { width: 40px; height: 40px; }
}

/* ---------- 语言切换器 ---------- */

/*
 * 右上角固定条：账户入口 + 语言切换器
 *
 * 两者由同一个 flex 容器排布，各自不再 fixed —— 否则宽度随语言变化的
 * 切换器会和账户入口重叠。
 */
.jh-topbar {
	position: fixed;
	top: 14px;
	right: 16px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * 顶部固定条占掉 14~51px，而 Storefront 给页头的上内边距只有约 42px，
 * 搜索框会从 42px 开始 —— 正好被固定条压住一角。这里把页头内容整体下移，
 * 让固定条有自己的空间。
 */
body.jh-dark .site-header {
	padding-top: 62px !important;
}

/*
 * 登录后要给 WordPress 的管理条让位
 *
 * 管理条是 position:fixed、z-index 99999、高 32px —— 比本站最高的
 * 滚动进度条（10000）还高两层。而 WP 那句 `html { margin-top: 32px }`
 * 只推得动普通流里的内容，推不动 fixed 元素，于是：
 *
 *   .jh-topbar   停在 top:14px，按钮实测占 y=16~50 —— 上半截被切掉。
 *                截图确认过：语言/账户/主题三个胶囊都只剩下面一半。
 *   .jh-progress 停在 top:0，被整条盖住 —— 登录后根本看不见进度条。
 *
 * 管理条高度：783px 以上 32px，601~782px 46px。
 * 再窄（≤600px）WP 会把它改成 absolute 跟页面一起滚走，这里**照样让位**：
 * 顶到页面最上面时它仍然挡着，而「控件位置略低」比「控件偶尔被挡」好得多。
 *
 * ⚠️ 这段写在 dark.css 里，而 .jh-progress 定义在 motion.css（后加载）。
 * 靠的是特异性 (0,2,1) > (0,1,0)，不是加载顺序。
 */
body.admin-bar .jh-topbar   { top: 46px; }
body.admin-bar .jh-progress { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .jh-topbar   { top: 60px; }
	body.admin-bar .jh-progress { top: 46px; }
}

.jh-lang {
	font-size: 13px;
}

/* 账户入口：外观和语言切换器保持一致 */
.jh-account {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(21, 25, 34, .9);
	border: 1px solid var(--jh-border);
	color: var(--jh-text);
	font-size: 13px;
	text-decoration: none;
	backdrop-filter: blur(10px);
	transition: border-color .22s ease, color .22s ease;
}

.jh-account:hover {
	border-color: var(--jh-accent-soft);
	color: #8fb6ff;
}

.jh-account__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4d8dff, #8b5cff);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
}

/* 未登录时图标是描边 SVG，不需要彩色底 */
.jh-account:not(.jh-account--in) .jh-account__icon {
	background: transparent;
	color: currentColor;
}

@media (max-width: 560px) {
	/* 窄屏只留图标，文字挤不下 */
	.jh-account__label {
		display: none;
	}
	.jh-account {
		padding: 7px 9px;
	}
}
/*
 * ⚠️ 选择器必须带 body.jh-dark 前缀。
 *
 * 下面这条 background 原本是 !important 的，但本文件开头的通用按钮规则
 *     body.jh-dark button, body.jh-dark input[type=submit], body.jh-dark .button, …
 * 也是 !important。**两边都 !important 时比的就不再是 !important，而是特异性**：
 *     body.jh-dark button  → (0,1,2)
 *     .jh-lang__btn        → (0,1,0)
 * 于是这条深色胶囊底从未生效过，按钮一直是通用规则铺的蓝紫渐变。
 * 浅色模式看不出来，因为 light.css 里的覆盖写作 body.jh-light .jh-lang__btn
 * (0,2,1)，反而压得住。结果就是「浅色对、暗色错」这种最难看出来的形态。
 */
body.jh-dark .jh-lang__btn {
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba(21,25,34,.9) !important;
	border: 1px solid var(--jh-border) !important;
	color: var(--jh-text) !important;
	padding: 7px 12px !important;
	border-radius: 999px !important;
	cursor: pointer;
	backdrop-filter: blur(10px);
}
/* 语言代码徽标（替代国旗 emoji） */
.jh-lang__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 18px;
	padding: 0 5px;
	border-radius: 5px;
	background: linear-gradient(135deg, rgba(77,141,255,.26), rgba(139,92,255,.20));
	border: 1px solid rgba(77,141,255,.32);
	color: #a8c8ff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .6px;
	line-height: 1;
}
.jh-lang__menu a .jh-lang__code {
	background: rgba(255,255,255,.06);
	border-color: var(--jh-border);
	color: var(--jh-text-dim);
}
.jh-lang__menu a.is-active .jh-lang__code,
.jh-lang__menu a:hover .jh-lang__code {
	background: linear-gradient(135deg, rgba(77,141,255,.30), rgba(139,92,255,.24));
	border-color: rgba(77,141,255,.40);
	color: #cfe0ff;
}
.jh-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 140px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--jh-card);
	border: 1px solid var(--jh-border);
	border-radius: var(--jh-radius-sm);
	box-shadow: var(--jh-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.jh-lang.is-open .jh-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.jh-lang__menu a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--jh-text-dim) !important;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.jh-lang__menu a:hover,
.jh-lang__menu a.is-active {
	background: rgba(77,141,255,.12);
	color: var(--jh-text) !important;
}

/* ---------- 商品详情 ---------- */

body.jh-dark .jh-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 20px;
}
body.jh-dark .jh-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--jh-card);
	border: 1px solid var(--jh-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--jh-text);
}
body.jh-dark .jh-meta-pill em {
	font-style: normal;
	color: var(--jh-text-faint);
	font-size: 12px;
}

body.jh-dark .single_add_to_cart_button { padding: 14px 32px !important; font-size: 15px; }

body.jh-dark .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--jh-border);
}
body.jh-dark .woocommerce-tabs ul.tabs li a {
	background: transparent !important;
	color: var(--jh-text-dim) !important;
	border: none !important;
}
body.jh-dark .woocommerce-tabs ul.tabs li.active a { color: var(--jh-accent) !important; }
body.jh-dark .woocommerce-tabs .panel {
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	padding: 24px;
	margin-top: 20px;
}

body.jh-dark table.shop_attributes { border: none; }
body.jh-dark table.shop_attributes th,
body.jh-dark table.shop_attributes td {
	background: transparent !important;
	border-bottom: 1px solid var(--jh-border-soft) !important;
	color: var(--jh-text-dim);
	padding: 12px 14px;
}
body.jh-dark table.shop_attributes th { color: var(--jh-text); font-weight: 600; }

/* ---------- 表单 / 结算 ---------- */

body.jh-dark input[type="text"], body.jh-dark input[type="email"],
body.jh-dark input[type="password"], body.jh-dark input[type="tel"],
body.jh-dark input[type="number"], body.jh-dark input[type="search"],
body.jh-dark textarea, body.jh-dark select {
	background: var(--jh-bg-elev) !important;
	border: 1px solid var(--jh-border) !important;
	color: var(--jh-text) !important;
	border-radius: var(--jh-radius-sm);
	padding: 11px 14px;
}
body.jh-dark input:focus, body.jh-dark textarea:focus, body.jh-dark select:focus {
	outline: none;
	border-color: var(--jh-accent) !important;
	box-shadow: 0 0 0 3px rgba(77,141,255,.16);
}
body.jh-dark ::placeholder { color: var(--jh-text-faint); }

/*
 * 区块结算页的复选框（条款同意、账单地址相同、订单备注）
 *
 * WooCommerce 自己的规则把底写死成白色：
 *   .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]
 *     { background-color: #fff; border: 1px solid color-mix(in srgb, currentColor 48%, transparent) }
 * 特异性 (0,3,1)。实测暗色模式下就是一个 20×20 的白方块糊在近黑底上，
 * 截图看过，非常扎眼。下面的选择器 (0,4,1) + !important 才压得住。
 *
 * 勾号是 WC 的 <svg class="wc-block-components-checkbox__mark">，
 * 靠 display:none → block 切换（不是透明度），fill 写死 #000。
 * 底变深之后黑勾号等于看不见，所以 fill 也得改。
 *
 * 对比度（WCAG 1.4.11 要求控件边界 ≥ 3:1）：
 *   未勾选的框边 --jh-text-faint —— 暗色 3.8:1 / 亮色 4.9:1
 *   勾选后的填充 --jh-accent  —— 暗色 5.5:1 / 亮色 5.1:1
 *   白勾号 vs 填充            —— 暗色 3.2:1 / 亮色 5.1:1
 */
body.jh-dark .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background-color: var(--jh-bg-elev) !important;
	border: 1px solid var(--jh-text-faint) !important;
	border-radius: 5px !important;
	transition: background-color .18s ease, border-color .18s ease;
}

body.jh-dark .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--jh-accent) !important;
	border-color: var(--jh-accent) !important;
}

body.jh-dark .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff !important;
}

/* 悬停时给个提示（WC 自己没写 hover 态） */
body.jh-dark .wc-block-components-checkbox label:hover
	.wc-block-components-checkbox__input[type="checkbox"]:not(:checked) {
	border-color: var(--jh-accent) !important;
}

/*
 * 键盘焦点。本文件上面那条 `body.jh-dark input:focus { outline: none }`
 * 把 WC 自带的 outline 一起干掉了，只剩边框变色 —— 键盘用户看不出焦点在哪。
 * 复选框的边框本来就只有 1px，只靠变色不够，这里把 outline 加回来。
 */
body.jh-dark .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--jh-accent) !important;
	outline-offset: 2px;
}

/*
 * 同意条款那行里的链接。站内约定是「界面元素去下划线、正文里的链接保留下划线」
 * （见 .jh-verify-toast a 和手机底栏那两条注释），这行属于正文，
 * 而且是要用户点开去读的法律文本，下划线该留 —— 它是可点性的唯一线索。
 */
body.jh-dark .wc-block-checkout__terms a {
	color: var(--jh-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.jh-dark .wc-block-checkout__terms a:hover {
	text-decoration-thickness: 2px;
}

/*
 * 配送方法 / 支払い方法的单选框 —— 跟上面的复选框是同一处毛病。
 *
 * WooCommerce 给单选框的默认样式同样把底写死成白色：
 *   .wc-block-components-radio-control .wc-block-components-radio-control__input
 *     { background:#fff; border:1px solid color-mix(in srgb,currentColor 48%,transparent); border-radius:50% }
 * 特异性 (0,3,1)。
 *
 * 暗色模式下，**未选中**的那几个渲染成纯白实心圆，比选中的那个还抢眼
 * —— 主次完全反了（截图确认过）。选中态 WC 只用「边框加粗到 2px + 提高不透明度」
 * 表示，里面那个点被 `...__input:after{ display:none }` 永久关掉了。
 *
 * 这里改成「填品牌色 + 白点」，跟复选框的「填品牌色 + 白勾」是同一套语言。
 */
body.jh-dark .wc-block-components-radio-control .wc-block-components-radio-control__input {
	background-color: var(--jh-bg-elev) !important;
	border: 1px solid var(--jh-text-faint) !important;
	transition: background-color .18s ease, border-color .18s ease;
}

body.jh-dark .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	background-color: var(--jh-accent) !important;
	border-color: var(--jh-accent) !important;
}

/* 把 WC 关掉的那个点自己画回来（4px 内缩 → 10px 的点） */
body.jh-dark .wc-block-components-radio-control .wc-block-components-radio-control__input:checked:after {
	content: "";
	display: block;
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	border-radius: 50%;
	background: #fff;
}

body.jh-dark .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--jh-accent) !important;
	outline-offset: 2px;
}

/*
 * 选项之间的分隔线。WC 走 --wc-separator-color 这个变量，不定义就退回
 * `currentColor 20%` —— 暗色底上几乎看不见，几行选项糊成一片。
 */
body.jh-dark .wc-block-components-radio-control {
	--wc-separator-color: var(--jh-border-soft);
}

body.jh-dark .woocommerce-checkout-review-order,
body.jh-dark .cart_totals,
body.jh-dark .woocommerce-checkout #payment,
body.jh-dark .woocommerce-cart table.cart {
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	padding: 22px;
}
body.jh-dark .woocommerce-checkout #payment ul.payment_methods {
	background: transparent;
	border-bottom: 1px solid var(--jh-border-soft);
}
body.jh-dark #payment div.payment_box {
	background: var(--jh-bg-elev);
	color: var(--jh-text-dim);
}
body.jh-dark #payment div.payment_box::before { border-bottom-color: var(--jh-bg-elev); }
body.jh-dark #add_payment_method #payment div.form-row,
body.jh-dark .woocommerce-cart #payment div.form-row,
body.jh-dark .woocommerce-checkout #payment div.form-row { background: transparent; }

/* ---------- 页脚 ---------- */

body.jh-dark .site-footer {
	background: #070910 !important;
	border-top: 1px solid var(--jh-border-soft);
	color: var(--jh-text-faint);
}
body.jh-dark .site-footer h1, body.jh-dark .site-footer h2,
body.jh-dark .site-footer h3, body.jh-dark .site-footer h4 { color: var(--jh-text); }
body.jh-dark .site-footer a { color: var(--jh-text-dim); }
body.jh-dark .site-footer a:hover { color: var(--jh-accent); }
body.jh-dark .site-info { border-top: 1px solid var(--jh-border-soft); color: var(--jh-text-faint); }

/* ---------- 其它 ---------- */

body.jh-dark .woocommerce-breadcrumb {
	background: transparent;
	color: var(--jh-text-faint);
}
body.jh-dark .woocommerce-breadcrumb a { color: var(--jh-text-dim); }

/*
 * 「特价」角标
 *
 * 原渐变是 var(--jh-sale)=#ff5c7c → #ff8a5c，白字实测只有 2.64:1 ～ 3.5:1 ——
 * 珊瑚色本身就亮，压不住白字。压深到 #c62b4e → #bd4f18 后是 5.45:1 / 4.89:1，
 * 浅色模式那份用同一组颜色，两边观感一致。
 */
body.jh-dark .onsale {
	background: linear-gradient(135deg, #c62b4e, #bd4f18) !important;
	color: #fff !important;
	border-radius: 999px;
	padding: 4px 13px;
	font-weight: 700;
	font-size: 12px;
	box-shadow: 0 4px 14px rgba(198, 43, 78, .35);
}

body.jh-dark .widget,
body.jh-dark .storefront-product-section { background: transparent; }

body.jh-dark .storefront-product-section .section-title,
body.jh-dark .section-title {
	color: var(--jh-text);
	border: none;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .5px;
}

body.jh-dark ul.products li.product-category a img,
body.jh-dark .storefront-product-categories ul.products li.product-category img {
	border-radius: var(--jh-radius);
}

body.jh-dark .woocommerce-message,
body.jh-dark .woocommerce-info,
body.jh-dark .woocommerce-error {
	background: var(--jh-card) !important;
	color: var(--jh-text) !important;
	border-top-color: var(--jh-accent);
	border-radius: var(--jh-radius-sm);
}
body.jh-dark .woocommerce-info::before { color: var(--jh-accent); }

body.jh-dark .star-rating span::before,
body.jh-dark .star-rating::before { color: var(--jh-warn); }

/* 滚动条 */
body.jh-dark ::-webkit-scrollbar { width: 11px; height: 11px; }
body.jh-dark ::-webkit-scrollbar-track { background: var(--jh-bg); }
body.jh-dark ::-webkit-scrollbar-thumb {
	background: #262e3d;
	border-radius: 6px;
	border: 2px solid var(--jh-bg);
}
body.jh-dark ::-webkit-scrollbar-thumb:hover { background: #33405a; }

/* ---------- 首页分类卡片：隐藏商品数量 ---------- */

body.jh-dark .woocommerce-loop-category__title .count,
body.jh-dark ul.products li.product-category .count {
	display: none !important;
}

/* ---------- 首页「按品牌选购」 ---------- */

.jh-brands__grid {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin: 0 0 16px !important;
	padding: 0 !important;
	list-style: none !important;
}

body.jh-dark .jh-brands__grid li.jh-brand {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	float: none !important;
	width: auto !important;
	clear: none !important;
}

body.jh-dark .jh-brand a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 12px 16px;
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	text-decoration: none;
	color: var(--jh-text);
	transition: transform .38s cubic-bezier(.2,.8,.25,1),
	            border-color .38s ease, box-shadow .38s ease;
}

body.jh-dark .jh-brand a:hover {
	transform: translateY(-6px);
	border-color: var(--jh-accent-soft);
	box-shadow: var(--jh-shadow-lg), var(--jh-glow);
	color: var(--jh-text) !important;
}

.jh-brand__thumb {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: var(--jh-bg-elev);
	background-size: cover;
	background-position: center;
	border: 2px solid var(--jh-border);
	transition: border-color .38s ease, transform .38s cubic-bezier(.2,.8,.25,1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--jh-accent);
}

body.jh-dark .jh-brand a:hover .jh-brand__thumb {
	border-color: var(--jh-accent);
	transform: scale(1.06);
}

.jh-brand__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--jh-text);
	text-align: center;
	line-height: 1.35;
}

.jh-brand__count {
	font-size: 12px;
	color: var(--jh-text-faint);
}

@media (max-width: 1100px) { .jh-brands__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .jh-brands__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .jh-brands__grid { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   邮箱验证提示条
   -------------------------------------------------------------
   由 mu-plugins/jiuhao-verify.php 输出：
     --ok    验证成功
     --err   链接无效/过期
     --warn  尚未验证（附「重新发送」链接）
   固定在视口底部居中，不占布局位置，也不挡内容。
   ============================================================= */

.jh-verify-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9998; /* 低于语言切换器(9999)，高于普通内容 */
	max-width: min(92vw, 640px);
	padding: 12px 18px;
	border-radius: var(--jh-radius-sm);
	background: var(--jh-card);
	border: 1px solid var(--jh-border);
	box-shadow: var(--jh-shadow-lg);
	color: var(--jh-text);
	font-size: 13.5px;
	line-height: 1.55;
	text-align: center;
	animation: jh-toast-in .45s cubic-bezier(.16,.84,.32,1) both;
}

@keyframes jh-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(14px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.jh-verify-toast a {
	color: var(--jh-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jh-verify-toast a:hover { color: #8fb6ff; }

/* 成功 */
.jh-verify-toast--ok {
	border-color: rgba(46, 204, 143, .45);
	box-shadow: var(--jh-shadow-lg), 0 0 24px rgba(46, 204, 143, .18);
}

/* 失败 */
.jh-verify-toast--err {
	border-color: rgba(255, 92, 124, .5);
	box-shadow: var(--jh-shadow-lg), 0 0 24px rgba(255, 92, 124, .18);
}

/* 待验证 */
.jh-verify-toast--warn {
	border-color: rgba(255, 176, 32, .45);
	box-shadow: var(--jh-shadow-lg), 0 0 24px rgba(255, 176, 32, .16);
}

@media (max-width: 560px) {
	.jh-verify-toast {
		left: 12px;
		right: 12px;
		bottom: 12px;
		transform: none;
		max-width: none;
	}
	@keyframes jh-toast-in {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* =============================================================
   物流状态
   -------------------------------------------------------------
   由 mu-plugins/jiuhao-shipment.php 输出：
     订单列表的 .jh-stage 状态胶囊
     订单详情的 .jh-shipment 面板 + .jh-timeline 时间线
   ============================================================= */

/* 订单列表里的状态胶囊 */
.jh-stage {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: .3px;
	white-space: nowrap;
	background: var(--jh-bg-elev);
	border: 1px solid var(--jh-border);
	color: var(--jh-text-dim);
}

.jh-stage--received  { border-color: var(--jh-border); }
.jh-stage--preparing { border-color: rgba(255, 176, 32, .45); color: #ffd27a; }
.jh-stage--shipped   { border-color: var(--jh-accent-soft); color: #8fb6ff; }
.jh-stage--delivered {
	border-color: rgba(46, 204, 143, .45);
	color: #6ee7b7;
	background: rgba(46, 204, 143, .13);
}

/* 订单详情的配送面板 */
.jh-shipment {
	margin: 28px 0;
	padding: 22px 24px;
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
}

.jh-shipment h2 {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.4;
	color: var(--jh-text);
}

/* 时间线 */
.jh-timeline {
	display: flex;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.jh-timeline__item {
	position: relative;
	flex: 1;
	padding-top: 22px;
	text-align: center;
	font-size: 12.5px;
	color: var(--jh-text-faint);
}

/* 连接线：除第一项外都向左画一段 */
.jh-timeline__item::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: 50%;
	height: 2px;
	background: var(--jh-border);
}

.jh-timeline__item::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 50%;
	right: 0;
	height: 2px;
	background: var(--jh-border);
}

.jh-timeline__item:first-child::before,
.jh-timeline__item:last-child::after {
	display: none;
}

/* 已完成的段落连线点亮 */
.jh-timeline__item.is-done::before,
.jh-timeline__item.is-done::after,
.jh-timeline__item.is-current::before {
	background: linear-gradient(90deg, #4d8dff, #8b5cff);
}

.jh-timeline__dot {
	position: absolute;
	top: 2px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: var(--jh-bg-elev);
	border: 2px solid var(--jh-border);
}

.jh-timeline__item.is-done .jh-timeline__dot {
	background: var(--jh-accent);
	border-color: var(--jh-accent);
}

.jh-timeline__item.is-current .jh-timeline__dot {
	background: var(--jh-accent);
	border-color: var(--jh-accent);
	box-shadow: 0 0 0 4px rgba(77, 141, 255, .22);
}

.jh-timeline__item.is-done .jh-timeline__label,
.jh-timeline__item.is-current .jh-timeline__label {
	color: var(--jh-text);
}

.jh-timeline__item.is-current .jh-timeline__label {
	font-weight: 600;
}

/* 承运商与单号 */
.jh-shipment__detail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding-top: 18px;
	border-top: 1px solid var(--jh-border-soft);
}

.jh-shipment__row {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13.5px;
	color: var(--jh-text);
}

.jh-shipment__row em {
	font-style: normal;
	font-size: 12px;
	color: var(--jh-text-faint);
	letter-spacing: .3px;
}

.jh-shipment__row code {
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--jh-bg-elev);
	border: 1px solid var(--jh-border);
	font-size: 13px;
	letter-spacing: .4px;
}

.jh-shipment__track {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--jh-radius-sm);
	background: linear-gradient(135deg, #4d8dff, #8b5cff);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease;
}

.jh-shipment__track:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(77, 141, 255, .32);
}

.jh-shipment__pending {
	margin: 0;
	font-size: 13.5px;
	color: var(--jh-text-dim);
}

/* 窄屏：时间线改成纵向，横排会挤成一团 */
@media (max-width: 560px) {
	.jh-timeline {
		flex-direction: column;
		gap: 14px;
	}
	.jh-timeline__item {
		padding-top: 0;
		padding-left: 26px;
		text-align: left;
	}
	.jh-timeline__item::before {
		top: 0;
		bottom: 50%;
		left: 5px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.jh-timeline__item::after {
		top: 50%;
		bottom: 0;
		left: 5px;
		right: auto;
		width: 2px;
		height: auto;
		background: var(--jh-border);
	}
	.jh-timeline__dot {
		top: 4px;
		left: 0;
		margin-left: 0;
	}
}

/* =============================================================
   注册表单：给密码强度提示预留高度
   -------------------------------------------------------------
   现象：第一次点「注册」按钮没反应，要点第二次才行。

   原因：WooCommerce 的密码强度提示条（.woocommerce-password-strength）
   不是一开始就在 DOM 里的，而是**密码框失焦时**才插进去的。它高 38px，
   插进来会把下方的注册按钮整体往下顶 38px。

   于是点按钮的过程变成：
     按下鼠标 → 密码框失焦 → 提示条插入 → 按钮被顶走 38px
     → 抬起鼠标 → 落点已经不在按钮上 → 浏览器不认为构成一次点击

   这里给密码那一行预留出提示条的高度，插进来时不再产生位移。

   用 :has() 选择器，是因为密码行和邮箱行的 class 完全一样，只能靠
   「里面有没有密码框」来区分。:has() 在 Chrome/Edge 105+、
   Safari 15.4+、Firefox 121+ 都支持。浏览器不支持时的后果只是回到
   现在的行为，不会更糟；而关掉 JS 时 WooCommerce 的提示条本来也不会出现。
   ============================================================= */

.woocommerce-form-register .woocommerce-form-row:has(#reg_password),
.woocommerce-form-register .woocommerce-form-row:has(input[type="password"]) {
	/* 标签 26 + 输入框 50 + 提示条 38 */
	min-height: 114px;
}

/* =============================================================
   首页标题
   -------------------------------------------------------------
   首页用的是 Storefront 的 Homepage 模板，它把页面标题
   （「ホーム / Home / 首页」）直接输出成 <h1 class="entry-title">，
   不走 storefront_page 动作，所以没法用 remove_action 摘掉。

   正文顶上顶着一个巨大的「Home」既难看，语义也不对——首页的主标题
   该是站点本身。这里只在视觉上隐藏，h1 仍留在 DOM 里给读屏和搜索引擎，
   免得首页完全没有一级标题。

   其他页面的标题不受影响。
   ============================================================= */

body.home .entry-header {
	display: none;
}

/* =============================================================
   邮箱验证面板（会员中心）
   -------------------------------------------------------------
   由 mu-plugins/jiuhao-verify.php 输出，挂在会员中心仪表盘最上方。
   未验证的用户点头像进来第一眼就能看到「发去哪了」「在哪填验证码」。
   ============================================================= */

.jh-verify-panel {
	margin: 0 0 32px;
	padding: 22px 24px 24px;
	background: var(--jh-card);
	border: 1px solid rgba(255, 176, 32, .38);
	border-radius: var(--jh-radius);
	box-shadow: var(--jh-shadow);
}

.jh-verify-panel h2 {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.4;
	color: var(--jh-text);
}

.jh-verify-panel__lead {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--jh-text-dim);
}

.jh-verify-panel__lead strong {
	color: var(--jh-text);
	font-weight: 600;
	word-break: break-all;
}

.jh-verify-panel__desc {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--jh-text-dim);
}

/* 两个表单并排：左边发码、右边填码 */
.jh-verify-panel__send,
.jh-verify-panel__code {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 14px 12px 0;
	vertical-align: middle;
}

.jh-verify-panel__code label {
	font-size: 13px;
	color: var(--jh-text-dim);
	white-space: nowrap;
}

.jh-verify-panel__code input {
	width: 132px;
	padding: 9px 12px;
	background: var(--jh-bg-elev);
	border: 1px solid var(--jh-border);
	border-radius: var(--jh-radius-sm);
	color: var(--jh-text);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 5px;
	text-align: center;
}

.jh-verify-panel__code input:focus {
	outline: none;
	border-color: var(--jh-accent);
	box-shadow: var(--jh-glow);
}

/* 按钮：主按钮用品牌渐变，次按钮描边 */
.jh-verify-panel .button,
.jh-verify-badge + * .button {
	border-radius: var(--jh-radius-sm) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	cursor: pointer;
	transition: transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease;
}

.jh-verify-panel__send .button {
	background: var(--jh-bg-elev) !important;
	border: 1px solid var(--jh-border) !important;
	color: var(--jh-text) !important;
}

.jh-verify-panel__send .button:hover {
	border-color: var(--jh-accent-soft) !important;
	color: #8fb6ff !important;
}

.jh-verify-panel__code .button {
	background: linear-gradient(135deg, #4d8dff, #8b5cff) !important;
	border: none !important;
	color: #fff !important;
}

.jh-verify-panel__code .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(77, 141, 255, .32);
}

/* 提交结果 */
.jh-verify-panel__msg {
	margin: 8px 0 0;
	padding: 9px 14px;
	border-radius: var(--jh-radius-sm);
	font-size: 13.5px;
}

.jh-verify-panel__msg--ok {
	background: rgba(46, 204, 143, .12);
	border: 1px solid rgba(46, 204, 143, .38);
	color: #6ee7b7;
}

.jh-verify-panel__msg--err {
	background: rgba(255, 92, 124, .12);
	border: 1px solid rgba(255, 92, 124, .42);
	color: #ff9aae;
}

/* 会员中心导航上方的状态徽章 */
.jh-verify-badge {
	display: inline-block;
	margin: 0 0 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 176, 32, .13);
	border: 1px solid rgba(255, 176, 32, .42);
	color: #ffd27a;
	font-size: 12px;
	letter-spacing: .3px;
}

@media (max-width: 560px) {
	.jh-verify-panel__send,
	.jh-verify-panel__code {
		display: flex;
		margin-right: 0;
	}
	.jh-verify-panel__code input {
		flex: 1;
	}
}

/* =============================================================
   手机端底部工具栏
   -------------------------------------------------------------
   Storefront 自带的 .storefront-handheld-footer-bar 是**白底黑字**，
   在暗色主题下非常突兀——手机上底部一大条白色横杠。

   它 position: fixed、z-index 9999、高约 69px，还带来一个连带问题：
   我们的验证提示条 .jh-verify-toast 是 z-index 9998、bottom 12px，
   正好被它盖住，手机上根本看不到提示。

   这里把工具栏改成暗色，并把提示条抬到它上面。
   ============================================================= */

body.jh-dark .storefront-handheld-footer-bar {
	background: rgba(10, 12, 17, .95) !important;
	border-top: 1px solid var(--jh-border-soft) !important;
	box-shadow: 0 -8px 28px rgba(0, 0, 0, .5);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

body.jh-dark .storefront-handheld-footer-bar ul li > a {
	background: transparent !important;
	color: var(--jh-text-dim) !important;
	border-right-color: var(--jh-border-soft) !important;
}

body.jh-dark .storefront-handheld-footer-bar ul li > a:hover,
body.jh-dark .storefront-handheld-footer-bar ul li > a:focus {
	color: var(--jh-accent) !important;
}

/* 图标是 ::before 画的，颜色继承自链接即可，但要压掉 Storefront 写死的色 */
body.jh-dark .storefront-handheld-footer-bar ul li > a::before,
body.jh-dark .storefront-handheld-footer-bar ul li.search > a::before,
body.jh-dark .storefront-handheld-footer-bar ul li.my-account > a::before,
body.jh-dark .storefront-handheld-footer-bar ul li.cart > a::before {
	color: inherit !important;
}

/* 购物车件数气泡 */
body.jh-dark .storefront-handheld-footer-bar .count {
	background: var(--jh-accent) !important;
	color: #fff !important;
}

/* 点搜索展开的面板 */
body.jh-dark .storefront-handheld-footer-bar .site-search,
body.jh-dark .storefront-handheld-footer-bar .site-search .widget {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
}

body.jh-dark .storefront-handheld-footer-bar .site-search input[type="search"] {
	background: var(--jh-bg-elev) !important;
	border: 1px solid var(--jh-border) !important;
	color: var(--jh-text) !important;
}

@media (max-width: 760px) {
	/* 提示条要抬到底部工具栏（约 69px）之上，否则被它盖住 */
	.jh-verify-toast {
		bottom: 82px !important;
	}
	/* 环绕区块在窄屏内容更少，收一点高度，少留空白 */
	.jh-orbit__stage {
		height: 280px;
	}
}

/*
 * 手持端搜索面板：未点击时不要露出一截
 *
 * Storefront 把它定位在底部栏下方（部分落在视口外），点击搜索图标后
 * 滑上来并给 li.search 加 .active 类。未激活时那半截露在屏幕底边，
 * 看起来像布局坏了。这里按 .active 收起来。
 */
body.jh-dark .storefront-handheld-footer-bar li.search:not(.active) .site-search {
	display: none;
}

/* =============================================================
   WooCommerce Blocks 的推荐商品网格
   -------------------------------------------------------------
   购物车页与结算页底部的「推荐商品」用的是另一套类名
   （.wc-block-grid__product*），**和商品列表页的 ul.products li.product
   不是同一套 DOM**，所以本文件里那些商品卡片规则一条都盖不到它。

   后果是它保持着 WooCommerce 自带的硬编码深色：
     h1..h6, .wc-block-grid__product-title  → #333
     ul.products li.product .price, …        → #43454b
   压在深色底上实测只有 1.55:1 —— 标题和价格基本看不见。
   浅色模式看不出问题（深字压白底），所以只在暗色下暴露。

   颜色一律走 CSS 变量，这样浅色模式（light.css 会在 body.jh-light 上
   重定义同一批变量）自动跟着变，不必写第二份。
   ============================================================= */

body.jh-dark .wc-block-grid__product-title {
	color: var(--jh-text) !important;
}
body.jh-dark .wc-block-grid__product .price,
body.jh-dark .wc-block-grid__product-price {
	color: var(--jh-accent) !important;
}
/* 原价同样受父主题 `.price del { opacity: .65 }` 影响，一并收回来 */
body.jh-dark .wc-block-grid__product .price del,
body.jh-dark .wc-block-grid__product-price del {
	color: var(--jh-text-faint) !important;
	opacity: 1 !important;
}
body.jh-dark .wc-block-grid__product .price ins,
body.jh-dark .wc-block-grid__product-price ins {
	color: var(--jh-sale) !important;
}

/* =============================================================
   页头购物车（链接 + 件数）
   -------------------------------------------------------------
   这个位置的文字色来自 Storefront 的泛化规则（实测落到 #747474），
   而件数还叠着一层 `.cart-contents .count { opacity: .5 }`，
   深色底上实测掉到 1.19:1。
   ============================================================= */

body.jh-dark .site-header-cart .cart-contents,
body.jh-dark .site-header-cart .cart-contents .count {
	color: var(--jh-text-dim) !important;
	opacity: 1 !important;
}

/* =============================================================
   手机端：主菜单与底部工具栏
   ============================================================= */

@media (max-width: 767px) {

	/* ---------- 主菜单 ----------
	 *
	 * Storefront 的手机菜单是**另一套 DOM**：storefront_primary_navigation()
	 * 会调用 wp_nav_menu() 两次，一次给桌面（.primary-navigation），
	 * 一次给手机（.handheld-navigation），各自绑定不同的菜单位置。
	 * 主题只注册了桌面那个，所以 .handheld-navigation 压根不存在 ——
	 * 现象就是点「メニュー」按钮变成 ✕，菜单却什么也不出来。
	 *
	 * 这里不补第二个菜单位置，而是让手机直接复用桌面这套
	 * .primary-navigation：它已经由 Polylang 按语言翻译好了，
	 * 再维护一份手机菜单只会多一处要同步的东西。
	 *
	 * 原先它靠 Storefront 的基础规则 .primary-navigation{display:none}
	 * 在手机上藏起来，所以只要在展开时把它显示出来。
	 */

	body.jh-dark .main-navigation { position: relative; }

	/*
	 * 展开的面板
	 *
	 * ⚠️ 这里常驻 display:block，显隐靠 visibility + opacity —— 不能靠
	 * Storefront 那套 `display:none → block`。display 是不可过渡的属性，
	 * 从 none 切到 block 时元素根本还没参与渲染，opacity/transform 的过渡
	 * 不会触发，结果就是「啪」地一下出现，没有任何动画。
	 *
	 * transform-origin 放在右上角，动画看起来是从「メニュー」按钮那里长出来的。
	 */
	body.jh-dark .main-navigation .primary-navigation {
		display: block;
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		right: 0;
		z-index: 80;
		padding: 8px;
		background: var(--jh-card);
		border: 1px solid var(--jh-border);
		border-radius: 18px;
		box-shadow: var(--jh-shadow-lg);
		transform-origin: 100% 0;
		/* 收起态 */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-10px) scale(.96);
		transition:
			opacity .2s cubic-bezier(.2, .8, .25, 1),
			transform .28s cubic-bezier(.2, .8, .25, 1),
			visibility 0s linear .28s;   /* 收起时等动画播完再隐藏 */
	}

	body.jh-dark .main-navigation.toggled .primary-navigation {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) scale(1);
		transition:
			opacity .2s cubic-bezier(.2, .8, .25, 1),
			transform .28s cubic-bezier(.2, .8, .25, 1),
			visibility 0s;
	}

	body.jh-dark .main-navigation .primary-navigation ul.menu {
		display: block;
		margin: 0;
		padding: 0;
	}

	/* 每一项单独淡入上浮，按顺序错开一点，比整块一起出现有层次 */
	body.jh-dark .main-navigation .primary-navigation ul.menu > li {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		opacity: 0;
		transform: translateY(-6px);
		transition:
			opacity .22s cubic-bezier(.2, .8, .25, 1),
			transform .26s cubic-bezier(.2, .8, .25, 1);
	}
	body.jh-dark .main-navigation.toggled .primary-navigation ul.menu > li {
		opacity: 1;
		transform: translateY(0);
	}
	body.jh-dark .main-navigation.toggled .primary-navigation ul.menu > li:nth-child(1) { transition-delay: .05s; }
	body.jh-dark .main-navigation.toggled .primary-navigation ul.menu > li:nth-child(2) { transition-delay: .10s; }
	body.jh-dark .main-navigation.toggled .primary-navigation ul.menu > li:nth-child(3) { transition-delay: .15s; }
	body.jh-dark .main-navigation.toggled .primary-navigation ul.menu > li:nth-child(4) { transition-delay: .20s; }
	body.jh-dark .main-navigation.toggled .primary-navigation ul.menu > li:nth-child(n+5) { transition-delay: .24s; }

	body.jh-dark .main-navigation .primary-navigation ul.menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 15px 16px;
		border-radius: 12px;
		font-size: 15.5px;
		text-decoration: none;   /* 菜单项不要下划线 */
		color: var(--jh-text) !important;
		transition: background .18s ease, color .18s ease;
	}
	body.jh-dark .main-navigation .primary-navigation ul.menu > li > a:hover,
	body.jh-dark .main-navigation .primary-navigation ul.menu > li > a:focus {
		background: var(--jh-card-hover);
		color: var(--jh-accent) !important;
	}

	/* 右侧小箭头，暗示「点进去」 */
	body.jh-dark .main-navigation .primary-navigation ul.menu > li > a::after {
		content: "";
		flex: none;
		width: 7px;
		height: 7px;
		margin-right: 3px;
		border-right: 1.8px solid currentColor;
		border-bottom: 1.8px solid currentColor;
		transform: rotate(-45deg);
		opacity: .4;
	}

	/* 分项之间一条极淡的分隔线 */
	body.jh-dark .main-navigation .primary-navigation ul.menu > li + li {
		border-top: 1px solid var(--jh-border-soft);
	}

	/*
	 * 「メニュー」按钮
	 *
	 * 它命中了本文件开头那条通用按钮规则 body.jh-dark button，
	 * 被铺成一大块蓝紫渐变，压在页头左下，跟右上角那排小胶囊完全不搭。
	 * 几何尺寸沿用 Storefront 自己的（汉堡图标是 ::before/::after 按
	 * left:1em 定位的，改 padding 会把图标和文字错开），只换配色。
	 */
	body.jh-dark .main-navigation .menu-toggle {
		background: var(--jh-card) !important;
		background-image: none !important;
		border: 1px solid var(--jh-border) !important;
		border-radius: 999px !important;
		color: var(--jh-text) !important;
		box-shadow: none !important;
	}
	body.jh-dark .main-navigation .menu-toggle:hover {
		border-color: var(--jh-accent) !important;
		color: var(--jh-accent) !important;
	}
	/* 汉堡三横线是伪元素画的，颜色得单独继承 */
	body.jh-dark .main-navigation .menu-toggle::before,
	body.jh-dark .main-navigation .menu-toggle::after,
	body.jh-dark .main-navigation .menu-toggle span::before {
		background: currentColor;
	}

	/* ---------- 底部工具栏 ----------
	 *
	 * 只改了配色的时候，图标和气泡还是 Storefront 的默认尺寸：
	 * 图标 1.618em ≈ 26px、件数气泡也是 26px —— 一样大，
	 * 于是气泡整个盖在购物车图标上，看着像个「0」字招牌。
	 *
	 * 文案其实一直都在（マイアカウント / 検索 / カート，Polylang 已翻译），
	 * 只是被 text-indent:-9999px 藏了。这里改成「图标 + 文字」的竖排，
	 * 既是手机上最常见的底栏形态，也省掉自己画图标。
	 */

	/*
	 * 底栏 = 一条浮起来的「玻璃坞」
	 *
	 * 不再是贴底的一整条横杠，也不是三个各自为政的方块，而是：
	 * 外层留出边距浮在页面上，里面是一个整体圆角容器，
	 * 毛玻璃底 + 细描边 + 大阴影，三项平分。
	 *
	 * 选中项单独给一块强调色药丸 —— 之前三个按钮长得一模一样，
	 * 用户看不出自己现在在哪一栏。
	 */
	body.jh-dark .storefront-handheld-footer-bar {
		background: transparent !important;
		border-top: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
	}

	body.jh-dark .storefront-handheld-footer-bar ul {
		display: flex;
		gap: 4px;
		margin: 0;
		padding: 6px;
		border-radius: 24px;
		background: rgba(21, 25, 34, .78);
		border: 1px solid var(--jh-border);
		box-shadow: var(--jh-shadow-lg);
		backdrop-filter: blur(20px) saturate(170%);
		-webkit-backdrop-filter: blur(20px) saturate(170%);
	}

	body.jh-dark .storefront-handheld-footer-bar ul li {
		float: none;
		display: block;
		flex: 1;
		width: auto !important;   /* 压掉 Storefront 的 .columns-3 li{width:33.33%} */
		text-align: center;
	}

	/*
	 * 每一项：图标在上、文字在下。
	 *
	 * text-decoration:none 是必须的 —— 字下面那条横杠来自链接的默认下划线，
	 * 之前文案被 text-indent:-9999px 藏起来所以看不见，露出来之后就显形了。
	 */
	body.jh-dark .storefront-handheld-footer-bar ul li > a {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		height: 54px;
		text-indent: 0;              /* 把藏起来的文案放出来 */
		text-decoration: none;
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: .3px;
		border-radius: 18px;
		color: var(--jh-text-dim) !important;
		box-shadow: none;
		-webkit-tap-highlight-color: transparent;
		transition:
			transform .2s cubic-bezier(.2, .8, .25, 1),
			background .22s ease,
			color .22s ease;
	}

	/*
	 * 按下时缩一下，手机上给一点触感反馈。
	 * 缩放幅度对齐 micro-interaction 那条 skill 的建议值（约 .96）——
	 * 之前写 .9 缩得太狠，点起来像整块塌下去。
	 */
	body.jh-dark .storefront-handheld-footer-bar ul li > a:active {
		transform: scale(.94);
		transition-duration: .1s;
	}

	/*
	 * 选中态
	 *
	 * body 上的 jh-cur-account / jh-cur-cart 由 functions.php 的 body_class 打；
	 * 搜索不是页面而是弹出面板，用 Storefront 自己加的 li.search.active。
	 *
	 * 选择器写这么长是因为本文件前面有一条
	 * `body.jh-dark .storefront-handheld-footer-bar ul li > a { background: transparent !important }`
	 * —— 想盖掉它的 !important，既要更长的选择器也要 !important。
	 */
	body.jh-dark.jh-cur-account .storefront-handheld-footer-bar ul li.my-account > a,
	body.jh-dark.jh-cur-cart .storefront-handheld-footer-bar ul li.cart > a,
	body.jh-dark .storefront-handheld-footer-bar ul li.search.active > a {
		background: var(--jh-accent-soft) !important;
		color: var(--jh-accent) !important;
	}

	/*
	 * 图标换成自绘的线性图标
	 *
	 * Storefront 用的是它自带图标字体里的字形：人像是实心粗体、放大镜是细线、
	 * 菜篮又是另一个风格，三个摆一起笔画粗细和风格都不统一，看着很业余。
	 *
	 * 做法是把原来的字形清空（content: ""），改用 SVG 当遮罩、background 取
	 * currentColor —— 这样图标颜色自动跟着链接的 color 走，选中态不用另写一份。
	 */
	body.jh-dark .storefront-handheld-footer-bar ul li > a::before {
		content: "" !important;
		position: static;
		transform: none;
		top: auto;
		left: auto;
		margin: 0;
		display: block;
		width: 22px;
		height: 22px;
		background: currentColor;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
		transition: transform .28s cubic-bezier(.2, .8, .25, 1);
	}
	/* 选中时图标轻轻放大一点，配合药丸底 */
	body.jh-dark.jh-cur-account .storefront-handheld-footer-bar ul li.my-account > a::before,
	body.jh-dark.jh-cur-cart .storefront-handheld-footer-bar ul li.cart > a::before,
	body.jh-dark .storefront-handheld-footer-bar ul li.search.active > a::before {
		transform: scale(1.08);
	}

	/* 人像：圆头 + 肩线 */
	body.jh-dark .storefront-handheld-footer-bar ul li.my-account > a::before {
		-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='7.6' r='3.7'/><path d='M4.2 20.4c0-3.7 3.5-6.2 7.8-6.2s7.8 2.5 7.8 6.2'/></svg>");
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='7.6' r='3.7'/><path d='M4.2 20.4c0-3.7 3.5-6.2 7.8-6.2s7.8 2.5 7.8 6.2'/></svg>");
	}
	/* 放大镜 */
	body.jh-dark .storefront-handheld-footer-bar ul li.search > a::before {
		-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'><circle cx='10.6' cy='10.6' r='6.1'/><path d='M20.2 20.2l-4.5-4.5'/></svg>");
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'><circle cx='10.6' cy='10.6' r='6.1'/><path d='M20.2 20.2l-4.5-4.5'/></svg>");
	}
	/* 购物袋（比菜篮更符合现代商城，线条也更干净） */
	body.jh-dark .storefront-handheld-footer-bar ul li.cart > a::before {
		-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 7.8h14.8l-1.15 11.5a1.9 1.9 0 0 1-1.9 1.7H7.65a1.9 1.9 0 0 1-1.9-1.7Z'/><path d='M8.9 7.8V6.3a3.1 3.1 0 0 1 6.2 0v1.5'/></svg>");
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 7.8h14.8l-1.15 11.5a1.9 1.9 0 0 1-1.9 1.7H7.65a1.9 1.9 0 0 1-1.9-1.7Z'/><path d='M8.9 7.8V6.3a3.1 3.1 0 0 1 6.2 0v1.5'/></svg>");
	}

	/*
	 * 购物车件数气泡：缩小，并钉在图标右上角。
	 *
	 * ⚠️ 选择器必须走到 li.cart 这一层。Storefront 写的是
	 *     .storefront-handheld-footer-bar ul li.cart .count   → (0,3,2)
	 * 而 body.jh-dark .storefront-handheld-footer-bar .count   → (0,3,1)
	 * 低一级，所以尺寸类属性（width/height/font-size）会被它压回去，
	 * 只有它没写的那些（margin-left、box-sizing）才生效 ——
	 * 表现就是气泡颜色改了、大小纹丝不动。加 li.cart 提到 (0,4,3) 才压得住。
	 */
	body.jh-dark .storefront-handheld-footer-bar ul li.cart .count {
		position: absolute;
		top: 5px;
		left: 50%;
		margin-left: 4px;
		width: auto;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		box-sizing: border-box;
		border: 2px solid var(--jh-card);   /* 描边用底栏底色，别用白色 */
		border-radius: 999px;
		font-size: 10px;
		font-weight: 700;
		line-height: 13px;
		text-indent: 0;
	}
}

/* =============================================================
   漏网的几处硬编码深色
   ============================================================= */

/*
 * 页脚的隐私政策链接。WooCommerce 给它的是 #333，白底上没问题（12.6:1），
 * 深色底上实测 1.57:1——每个页面的页脚都是这个样子。
 */
body.jh-dark .privacy-policy-link {
	color: var(--jh-text-dim) !important;
}

/*
 * 划掉的原价。
 * 颜色本身没变过，问题是父主题的 `.price del { opacity: .65 }`：
 * 浅灰再乘 65% 的透明度，深色底上只剩 2.32:1。压回不透明即恢复到 3.75:1，
 * 弱化的语义靠颜色（--jh-text-faint）表达就够了，不需要再叠一层透明度。
 */
body.jh-dark .price del {
	opacity: 1 !important;
}

/*
 * 语言代码徽标
 *
 * 原来文字 #a8c8ff 压在 rgba(77,141,255,.26)→rgba(139,92,255,.20) 的
 * 半透明蓝紫底上，实测 2.13:1 —— 浅蓝压中蓝，跟浅色模式那个 1.30:1 是
 * 同一类毛病（浅色那边已单独覆盖）。
 *
 * 这里把徽标底压深、字提亮，保住「蓝底浅蓝字」的观感，两端分别是 5.7:1 / 6.2:1。
 */
.jh-lang__code {
	background: linear-gradient(135deg, #1c4abe, #5434b4) !important;
	border-color: rgba(120, 160, 255, .45) !important;
	color: #cfe0ff !important;
}

/* =============================================================
   首页 hero：氛围光与内容去重
   ============================================================= */

/*
 * hero 是一段居中纯文字（页面内容里的 h2 + 段落），背后全空。
 * 大屏上看就是一行白字浮在黑色里，很素、没焦点。这里在它背后铺一层
 * 很淡的径向光，给首屏一点纵深和温度，又不至于抢文字。
 *
 * 用 z-index:-1 配合 .entry-content 自己建立层叠上下文，
 * 光就会压在正文之下、页面底色之上，不用给每个子元素调 z-index。
 */
.home .entry-content {
	position: relative;
	z-index: 0;
}

.home .entry-content::before {
	content: "";
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
	width: min(1180px, 94vw);
	height: 520px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 56% at 50% 32%, rgba(77, 141, 255, .17), transparent 70%),
		radial-gradient(ellipse 44% 42% at 69% 60%, rgba(139, 92, 255, .12), transparent 72%);
	filter: blur(20px);
}

/*
 * 隐藏 hero 下面那个三列块
 *
 * 它的内容和正上方的信任条（正规ルート / スピード発送 / 7日間返品 / 送料無料）
 * 是同一批卖点，措辞略不同、顺序不同，等于首屏把同样三句话说两遍。
 * 信任条那份是主题渲染的、带图标和配色，明显更好，所以留它、藏这份。
 *
 * 用 CSS 隐藏而不是删页面内容，是为了好反悔 —— 删掉这一整段即可恢复。
 */
.home .entry-content > .wp-block-columns {
	display: none;
}

/* =============================================================
   按钮反馈与键盘焦点
   ============================================================= */

/*
 * 悬停 / 按下
 *
 * 通用按钮规则只铺了渐变底，没有任何状态反馈 —— 鼠标移上去、按下去
 * 都毫无变化，用起来像张图片。这里补一点物理感：悬停微微抬起加辉光，
 * 按下压回去。
 *
 * 悬停那组包在 @media (hover: hover) 里：触屏上 :hover 会「粘住」——
 * 点过一次之后高亮一直不消失，看着像选中了。
 */
@media (hover: hover) {
	body.jh-dark button:not(.menu-toggle):not(.jh-theme-toggle),
	body.jh-dark input[type="submit"],
	body.jh-dark .button,
	body.jh-dark .added_to_cart {
		transition:
			transform .2s cubic-bezier(.2, .8, .25, 1),
			box-shadow .25s ease,
			filter .25s ease;
	}
	body.jh-dark button:not(.menu-toggle):not(.jh-theme-toggle):hover,
	body.jh-dark input[type="submit"]:hover,
	body.jh-dark .button:hover,
	body.jh-dark .added_to_cart:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 26px rgba(77, 141, 255, .28);
		filter: brightness(1.06);
	}
}

body.jh-dark button:not(.menu-toggle):not(.jh-theme-toggle):active,
body.jh-dark input[type="submit"]:active,
body.jh-dark .button:active,
body.jh-dark .added_to_cart:active {
	transform: translateY(0) scale(.985);
	box-shadow: 0 4px 12px rgba(77, 141, 255, .20);
	transition-duration: .08s;
}

/*
 * 键盘焦点环
 *
 * 全站原本没有任何 :focus-visible 规则 —— 用 Tab 键走一遍完全看不出
 * 焦点落在哪，键盘和读屏用户基本没法用。
 *
 * 用 :focus-visible 而不是 :focus，所以鼠标点击不会冒出这个环，
 * 只在键盘操作时出现。颜色走 --jh-accent，两套配色下都够显眼。
 */
body.jh-dark :focus-visible {
	outline: 2px solid var(--jh-accent);
	outline-offset: 2px;
}

/* 系统开了「减弱动态效果」时不要位移，只保留颜色变化 */
@media (prefers-reduced-motion: reduce) {
	body.jh-dark button:not(.menu-toggle):not(.jh-theme-toggle):hover,
	body.jh-dark input[type="submit"]:hover,
	body.jh-dark .button:hover,
	body.jh-dark .added_to_cart:hover,
	body.jh-dark button:not(.menu-toggle):not(.jh-theme-toggle):active,
	body.jh-dark input[type="submit"]:active,
	body.jh-dark .button:active,
	body.jh-dark .added_to_cart:active {
		transform: none;
	}
}

/* =============================================================
   手机端收尾：底栏遮挡与纵向节奏
   ============================================================= */

@media (max-width: 767px) {

	/*
	 * 给固定底栏让位
	 *
	 * 底栏是 position:fixed 的浮层，不占文档流 —— 页面滚到底时，
	 * 最后一段内容会永久压在坞体底下点不到，hero 那种大标题更明显
	 * （实测被盖住一整行）。
	 *
	 * 用 :has() 判断底栏真的有内容才留白：购物车和结算页 Storefront
	 * 会主动不渲染这三个入口（Blocks 版购物车自带结算按钮），
	 * 那两页就不该白留一截。
	 */
	body.jh-dark:has(.storefront-handheld-footer-bar li) .site {
		padding-bottom: 88px;
	}

	/*
	 * 纵向节奏收紧
	 *
	 * Storefront 给 .hentry 上下各 42px 内边距，桌面端没问题，
	 * 390px 宽的手机上就是 84px 的空白 —— 信任条和首屏标题之间
	 * 实测空了 157px，翻半天看不到重点。压到一半。
	 */
	body.jh-dark .site-content .hentry {
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 34px;
	}
}

/* =============================================================
   按压反馈对齐
   ============================================================= */

/*
 * micro-interaction 那条 skill 给的量化建议：
 *   - 按压反馈要「即时」，scale 约 0.96，时长 100–250ms 区间取短的
 *   - 进入慢一点（ease-out），离开快一点
 *
 * 之前按钮按下去是 .985 ——几乎看不出动过；底栏是 .9 ——又过了。
 * 统一到 .96，并把时长压到 120ms，手感才是「按到了」而不是「抖了一下」。
 */
body.jh-dark button:not(.menu-toggle):not(.jh-theme-toggle):active,
body.jh-dark input[type="submit"]:active,
body.jh-dark .button:active,
body.jh-dark .added_to_cart:active {
	transform: translateY(0) scale(.96);
	transition-duration: .12s;
}

/* =============================================================
   标题排版：改用衬线（明朝体 / 宋体）
   -------------------------------------------------------------
   原本全站一套系统无衬线栈（PingFang / 微软雅黑 / Segoe UI / Roboto）。
   这套栈的问题不是不好看，而是**完全没有辨识度** —— 任何网页的默认样子，
   也是设计审查里「一眼看出是模板」的头号判据。

   标题换成衬线、正文保持无衬线，是最经典的搭配之一，能立刻拉开层次。
   对日文站点尤其合适：明朝体在日本电商里读作「上質」，卖精品的店用得多
   （無印良品、中川政良商店都是这个路子）。

   为什么用系统字体而不是下载 webfont：
     CJK 字体动辄几 MB，而本站已经为了国内访问速度**特意去掉了 Google Fonts**
     （见 functions.php 里 dequeue storefront-fonts 那段）。
     上面这几个明朝体 / 宋体在日文和中文系统的覆盖率都很高，
     零下载、零阻塞，拿不到的设备回退到 Georgia 也不会难看。

   只给「展示级」文字用：站名、区块标题、页面标题。
   商品卡标题不动 —— 那一屏几十个标题，全换衬线会太吵。
   ============================================================= */

body.jh-dark .site-title,
body.jh-dark .site-title a,
body.jh-dark .section-title,
body.jh-dark .entry-title,
body.jh-dark .page-title {
	/*
	 * ⚠️ 顺序和名字都不能想当然，这套是**实测**出来的。
	 *
	 * 最初只写了 macOS 那几个（Hiragino Mincho ProN / Songti SC）和
	 * Noto Serif，结果在本机（Windows 10 中文版）**整个栈全部落空** ——
	 * 这几个字体在 Windows 上都不存在，最后回退到无衬线的 Yu Gothic，
	 * 等于白改。查 C:\Windows\Fonts 才确认：这台机器有 simsun.ttc（宋体）
	 * 和 simkai.ttf（楷体），没有 msmincho / yumincho（那是日文版 Windows 才带）。
	 *
	 * 顺序按语言排：日文衬线在前（本站日文为主），中文衬线在后兜底，
	 * 最后才是西文衬线。同一个字形日文和中文的写法不同（直、骨、今 这些），
	 * 所以不能把中文字体放在日文字体前面。
	 */
	font-family:
		"Hiragino Mincho ProN", "Yu Mincho", "YuMincho",   /* 日文明朝体 */
		"Songti SC", "STSong", "SimSun", "NSimSun",        /* 中文宋体（Windows 上就是 SimSun） */
		"Noto Serif JP", "Noto Serif SC", "Source Han Serif SC",
		Georgia, "Times New Roman", serif;
	/* 「palt」是日文的等宽假名压缩特性，让かな/汉字混排更紧凑精致 */
	font-feature-settings: "palt" 1;
	letter-spacing: .012em;
}

/* =============================================================
   表单控件缺的 :disabled 状态
   -------------------------------------------------------------
   「八状态」里本站铺了默认 / hover / focus-visible / active 四种，
   :disabled 一处都没有 —— 加购按钮在 AJAX 请求期间会被 WooCommerce
   加上 .disabled 并置灰，但视觉上完全看不出来，用户会一直点。
   ============================================================= */

body.jh-dark button:disabled,
body.jh-dark button.disabled,
body.jh-dark input[type="submit"]:disabled,
body.jh-dark .button:disabled,
body.jh-dark .button.disabled,
body.jh-dark .added_to_cart.disabled {
	opacity: .45;
	cursor: not-allowed;
	filter: grayscale(.4);
	transform: none !important;
	box-shadow: none !important;
}

/* =============================================================
   页脚政策链接 & 法定披露页
   ============================================================= */

/* 页脚那排链接：小字、居中、中间用间隔点分开，不抢版权行的位置 */
.jh-footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 12.5px;
}

body.jh-dark .jh-footer-links a {
	color: var(--jh-text-dim) !important;
	text-decoration: none;
	transition: color .18s ease;
}
body.jh-dark .jh-footer-links a:hover { color: var(--jh-accent) !important; }

.jh-footer-links__sep {
	color: var(--jh-text-faint);
	opacity: .55;
}

/* ---------- 特定商取引法に基づく表記 ---------- */

.jh-tokusho__lead {
	margin: 0 0 20px;
	color: var(--jh-text-dim);
	font-size: 14px;
	line-height: 1.7;
}

/*
 * 用 dl 而不是 table：这些是「项目 → 内容」的对应关系，语义上就是定义列表；
 * 而且 table 在窄屏上要么横向滚动要么挤成一团，dl 可以简单地改成单列堆叠。
 */
body.jh-dark .jh-tokusho__list {
	margin: 0;
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	overflow: hidden;
}

body.jh-dark .jh-tokusho__list dt,
body.jh-dark .jh-tokusho__list dd {
	margin: 0;
	border-bottom: 1px solid var(--jh-border-soft);
}

body.jh-dark .jh-tokusho__list dt {
	padding: 13px 16px 4px;
	background: var(--jh-bg-elev);
	color: var(--jh-text);
	font-size: 13.5px;
	font-weight: 700;
}

body.jh-dark .jh-tokusho__list dd {
	padding: 0 16px 13px;
	background: var(--jh-bg-elev);
	color: var(--jh-text-dim);
	font-size: 13.5px;
	line-height: 1.7;
}

/* 最后一条不要多一条线 */
body.jh-dark .jh-tokusho__list dd:last-child { border-bottom: 0; }

.jh-tokusho__note {
	margin: 18px 0 0;
	padding: 11px 14px;
	border-left: 3px solid var(--jh-accent);
	border-radius: 0 var(--jh-radius-sm) var(--jh-radius-sm) 0;
	background: var(--jh-card);
	color: var(--jh-text-faint);
	font-size: 12.5px;
	line-height: 1.6;
}

/* 宽屏改成左右两栏，长文档扫起来快得多 */
@media (min-width: 768px) {
	body.jh-dark .jh-tokusho__list {
		display: grid;
		grid-template-columns: minmax(150px, 230px) 1fr;
	}
	body.jh-dark .jh-tokusho__list dt {
		padding: 13px 16px;
		border-right: 1px solid var(--jh-border-soft);
		border-bottom: 1px solid var(--jh-border-soft);
	}
	body.jh-dark .jh-tokusho__list dd {
		padding: 13px 16px;
		border-bottom: 1px solid var(--jh-border-soft);
	}
	/* 两栏布局下 dt 和它右边的 dd 是同一行，取倒数两个 */
	body.jh-dark .jh-tokusho__list dt:nth-last-of-type(1),
	body.jh-dark .jh-tokusho__list dd:last-child { border-bottom: 0; }
}