/**
 * 梦市 · 浅色（白天）模式
 *
 * 工作机制：
 *   dark.css 里所有规则都写成 `body.jh-dark 某组件`，那个 jh-dark 类是
 *   「梦市主题已启用」的标记，**两种模式下都存在**，不是「当前是暗色」的意思。
 *   浅色模式额外在 body 上挂 jh-light，由本文件覆盖配色。
 *
 *   这么做是因为 dark.css 有 1200 多行、几乎所有规则都挂着那个前缀，
 *   把前缀去掉等于整套样式失效。多一个 jh-light 覆盖面最稳。
 *
 * 本文件必须在 dark.css **之后**加载（functions.php 里的依赖顺序已保证），
 * 且因为 dark.css 大量使用 !important，这里对应位置也要用 !important 才压得住。
 */

/* =============================================================
   1. 调色板
   ============================================================= */

/*
 * 浅色调色板
 *
 * 设计原则：**不是把暗色简单反色，而是重建一套有层次的冷色调**。
 * 第一版做成了中性灰 + 白卡片，结果整个页面一片白、太平，
 * 暗色模式里那些氛围光、渐变、层次全丢了。
 *
 * 现在：底色带明确的冷蓝调（而不是近白），白卡片浮在上面才有层次；
 * 阴影也带蓝调而不是纯黑，看起来「有色」而不是灰蒙蒙。
 */
body.jh-light {
	--jh-bg:          #e9eef8;
	--jh-bg-elev:     #ffffff;
	--jh-card:        #ffffff;
	--jh-card-hover:  #f3f7ff;
	--jh-border:      #d5deee;
	--jh-border-soft: #e2e9f6;

	--jh-text:        #10141d;
	--jh-text-dim:    #47536b;
	/*
	 * 原来是 #77819a，实测白底上只有 3.9:1，够不上 AA 正文的 4.5:1；
	 * 而且 Storefront 父主题的 `.price del { opacity: .65 }`
	 * 和 `.site-header-cart .cart-contents .count { opacity: .5 }`
	 * 会把叠上去的浅灰再稀释一遍，实测掉到 2.2～2.3:1。
	 * 压深到 #67718a 后白底 4.9:1，仍然明显浅于 --jh-text-dim，层次没丢。
	 */
	--jh-text-faint:  #67718a;

	/* 强调色在白底上要比暗色模式更深，否则对比度不够 */
	--jh-accent:      #2a68e0;
	--jh-accent-soft: #a6c4f4;
	--jh-accent-2:    #7a45e0;

	/* 语义色同理：暗色模式那几个亮色放白底上会看不清 */
	--jh-ok:          #0d8a5f;
	--jh-sale:        #d42b50;
	--jh-warn:        #a3620a;

	/* 阴影带蓝调 —— 纯黑阴影在白底上显得脏且单调 */
	--jh-shadow:      0 4px 16px rgba(42, 104, 224, .10), 0 1px 3px rgba(16, 20, 29, .04);
	--jh-shadow-lg:   0 18px 44px rgba(42, 104, 224, .18), 0 2px 8px rgba(16, 20, 29, .05);
	--jh-glow:        0 0 0 1px rgba(42, 104, 224, .32), 0 0 26px rgba(42, 104, 224, .20);
}

/* =============================================================
   2. 底色与氛围光
   ============================================================= */

body.jh-light,
body.jh-light .site,
body.jh-light .site-content {
	background: var(--jh-bg) !important;
	color: var(--jh-text);
}

/* 底色做一条极淡的纵向渐变，比纯色更有层次 */
body.jh-light {
	background:
		linear-gradient(180deg, #e6ecf8 0%, #eef2fa 42%, #e8ecf7 100%) !important;
	background-attachment: fixed;
}

/* 氛围光：暗色模式那两团蓝紫辉光是整个画面的色彩来源，
   浅色模式第一版把它们压到 .07/.05，几乎看不见，于是页面全白。
   现在提高到 .16/.13 —— 仍然柔和，但能看出颜色。 */
body.jh-light::before {
	background:
		radial-gradient(1000px 560px at 10% -6%, rgba(42, 104, 224, .16), transparent 62%),
		radial-gradient(860px 500px at 90% 2%, rgba(122, 69, 224, .13), transparent 64%),
		radial-gradient(700px 700px at 50% 108%, rgba(42, 104, 224, .09), transparent 66%);
}

/* =============================================================
   3. 页头 / 顶栏
   ============================================================= */

/* 页头做成半透明，让下面的冷色底和氛围光透上来。
   改成实心白的话，页头和正文之间会出现一条生硬的分界线。 */
/*
 * 半透明磨砂。透明度试过 .58，太透了——往下滚的时候商品按钮和卡片会从页头
 * 底下透出来，看着像渲染残留。.74 既保住毛玻璃质感，滚过去的东西也不显形。
 */
body.jh-light .site-header {
	background: rgba(255, 255, 255, .74) !important;
	border-bottom: 1px solid rgba(42, 104, 224, .10) !important;
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
}

body.jh-light .site-title a {
	/* 渐变文字在白底上要换成更深的双色，原色太亮读不清 */
	background: linear-gradient(100deg, #1f5fd0, #6b3ad6) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: #1f5fd0 !important;
}

body.jh-light .site-description { color: var(--jh-text-dim) !important; }

/* 右上角固定条（账户入口 + 语言切换器） */
body.jh-light .jh-account,
body.jh-light .jh-lang__btn {
	background: rgba(255, 255, 255, .94) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
	box-shadow: 0 2px 10px rgba(23, 32, 56, .06);
}

body.jh-light .jh-account:hover {
	border-color: var(--jh-accent) !important;
	color: var(--jh-accent) !important;
}

/* 未登录时的描边头像：白底上要用深色 */
body.jh-light .jh-account__icon { color: var(--jh-text-dim); }
body.jh-light .jh-account--in .jh-account__icon { color: #fff; }

body.jh-light .jh-lang__menu {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
	box-shadow: var(--jh-shadow-lg);
}

body.jh-light .jh-lang__menu a { color: var(--jh-text-dim); }
body.jh-light .jh-lang__menu a:hover,
body.jh-light .jh-lang__menu a.is-active {
	background: var(--jh-card-hover);
	color: var(--jh-accent);
}

/*
 * 语言代码徽标（按钮上的「JA」「ZH」「EN」）
 *
 * dark.css 里这个徽标是**写死的浅蓝色**（color:#a8c8ff + 半透明蓝紫渐变底），
 * 只在深色底上成立。浅色模式原先没有任何覆盖，于是浅蓝字压在浅蓝底上，
 * 实测 1.30:1——几乎读不出来。
 *
 * 这里保持「淡彩底 + 深色字」的同款观感，把明度关系倒过来。
 */
body.jh-light .jh-lang__code {
	background: linear-gradient(135deg, rgba(42, 104, 224, .17), rgba(122, 69, 224, .14)) !important;
	border-color: rgba(42, 104, 224, .38) !important;
	color: #1a4dbb !important;
}

/* 下拉菜单里的徽标：默认态与悬停/选中态各有各的写死颜色 */
body.jh-light .jh-lang__menu a .jh-lang__code {
	background: rgba(42, 104, 224, .09) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text-dim) !important;
}
body.jh-light .jh-lang__menu a.is-active .jh-lang__code,
body.jh-light .jh-lang__menu a:hover .jh-lang__code {
	background: linear-gradient(135deg, rgba(42, 104, 224, .17), rgba(122, 69, 224, .14)) !important;
	border-color: rgba(42, 104, 224, .38) !important;
	color: #1a4dbb !important;
}

/* 导航 */
body.jh-light .main-navigation ul.menu > li > a { color: var(--jh-text) !important; }
body.jh-light .main-navigation ul.menu > li > a:hover,
body.jh-light .main-navigation ul.menu > li.current-menu-item > a {
	color: var(--jh-accent) !important;
}
body.jh-light .main-navigation ul.menu ul.sub-menu {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
}
body.jh-light .main-navigation ul.menu ul.sub-menu a { color: var(--jh-text-dim) !important; }

body.jh-light .site-search input[type="search"] {
	background: var(--jh-bg-elev) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}
body.jh-light .site-search input::placeholder { color: var(--jh-text-faint); }
body.jh-light .site-search button {
	background: var(--jh-card-hover) !important;
	color: var(--jh-text) !important;
	border-color: var(--jh-border) !important;
}

body.jh-light .site-header-cart .cart-contents { color: var(--jh-text-dim) !important; }

/* =============================================================
   4. 区块标题与装饰
   ============================================================= */

/*
 * ⚠️ 两个选择器缺一不可，且 background / background-size 必须带 !important。
 *
 * motion.css 写的是：
 *     body.jh-dark .section-title                             → (0,2,1)
 *     body.jh-dark .storefront-product-section .section-title → (0,3,1)
 * 首页区块标题同时命中第二条，所以只写 body.jh-light .section-title (0,2,1)
 * 特异性不够，暗色渐变会继续生效——现象是末尾字淡到几乎看不见
 * （暗色渐变两端是 #e9ecf3 近白色，落在白底上就没了）。
 *
 * ⚠️ background 是简写，会把它包含的**每一个**子属性一起重置。带 !important 的
 * 简写尤其阴——它会用 !important 把 background-size / background-clip 全部打回
 * 初始值，后面任何不带 !important 的同名声明都未必压得住。所以下面凡是 background
 * 简写碰过的子属性，一个都不能漏：
 *
 *   background-size  漏了 → 渐变宽度从 220% 退回 100%，流光不动
 *   background-clip  漏了 → 渐变不再裁到文字上，整块变成一个实心色条
 *                          （文字被 -webkit-text-fill-color: transparent 抹掉，
 *                           剩下的背景框就显出来了）
 */
body.jh-light .section-title,
body.jh-light .storefront-product-section .section-title {
	/* 暗色模式是「浅字 + 流光」，白底改成深字。两端保持近黑，末尾字才不会糊掉 */
	background: linear-gradient(100deg, #131720 8%, #2f6fe4 32%, #7b4ce0 54%, #131720 84%) !important;
	background-size: 220% auto !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	animation: jh-gradient-pan 9s ease-in-out infinite;
}

/* =============================================================
   5. 信任条
   ============================================================= */

body.jh-light .jh-trust__item {
	background: var(--jh-card) !important;
	border-color: var(--jh-border-soft) !important;
	box-shadow: var(--jh-shadow);
}
body.jh-light .jh-trust__item:hover {
	border-color: var(--jh-accent-soft) !important;
	box-shadow: var(--jh-shadow-lg), var(--jh-glow);
}
body.jh-light .jh-trust__icon { color: var(--jh-accent); }
body.jh-light .jh-trust__text strong { color: var(--jh-text); }
body.jh-light .jh-trust__text em { color: var(--jh-text-dim); }

/* =============================================================
   6. 分类卡 / 商品卡
   ============================================================= */

body.jh-light ul.products li.product-category,
body.jh-light ul.products li.product {
	background: var(--jh-card) !important;
	border-color: var(--jh-border-soft) !important;
	box-shadow: var(--jh-shadow);
}

/* 图上的暗色渐变遮罩是压在照片上的，两种模式都保留 ——
   照片本身是深是浅不可控，用白字+暗遮罩最稳 */

body.jh-light ul.products li.product .woocommerce-loop-product__title { color: var(--jh-text) !important; }
body.jh-light ul.products li.product .price { color: var(--jh-accent) !important; }
/*
 * 划掉的原价
 *
 * Storefront 父主题有 `.price del { opacity: .65 }`。深色模式下那是浅灰字
 * 叠在深底上，压一点透明度反而柔和；浅色模式就成了「浅灰字 + 65% 不透明度」，
 * 实测白底上只剩 2.24:1。这里把透明度收回来，改用颜色本身做弱化——
 * 语义一样（次要信息），但读得清。
 */
body.jh-light .price del {
	opacity: 1 !important;
	color: var(--jh-text-faint) !important;
}
body.jh-light ul.products li.product .price del { color: var(--jh-text-faint) !important; }
body.jh-light ul.products li.product .price ins { color: var(--jh-sale) !important; }

/* 顶栏购物车件数：同样是父主题的 `.cart-contents .count { opacity: .5 }` */
body.jh-light .site-header-cart .cart-contents .count { opacity: 1 !important; }

/*
 * 商品卡上的「加入购物车」按钮：改成实心强调色
 *
 * 原来是「淡蓝灰底 (#f3f7ff) + 极浅描边 (#d5deee)」压在近白的卡片上，
 * 实测按钮对卡片只有 1.08:1、描边 1.16:1 —— 白卡片上几乎看不出这里有个按钮。
 * （WCAG 1.4.11 对控件边界要求 3:1。）
 *
 * 这不是调色问题，是数学死结：浅色底要在白卡片上达到 3:1，亮度必须降到 0.30
 * 以下，那已经是中深色了，「柔和的浅色按钮」这个方向本身就走不通。
 *
 * 所以改成实心强调色 —— 这也是电商的通行做法：卡片上的主行动就该是一个
 * 明确的色块。用浅色调色板里的 accent 渐变，白字压在上面的对比是
 * 5.05:1 / 5.41:1，按钮整体对白卡片约 5:1，两项都达标。
 */
body.jh-light ul.products li.product .button,
body.jh-light ul.products li.product a.added_to_cart {
	background: linear-gradient(135deg, var(--jh-accent), var(--jh-accent-2)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(42, 104, 224, .22);
}

/* 卡片悬停时那条渐变描边（motion.css 用 mask 画的），白底上要收一点 */
body.jh-light ul.products li.product:hover,
body.jh-light ul.products li.product-category:hover {
	border-color: var(--jh-accent-soft) !important;
}

/* =============================================================
   7. 徽章
   ============================================================= */

body.jh-light .jh-badge {
	background: var(--jh-card-hover) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text-dim) !important;
}
body.jh-light .jh-badge--nego {
	background: rgba(15, 143, 99, .10) !important;
	border-color: rgba(15, 143, 99, .35) !important;
	color: #0b7a54 !important;
}
body.jh-light .jh-badge--fixed {
	background: var(--jh-card-hover) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text-faint) !important;
}

/*
 * 「特价」角标
 *
 * 原先在文件里有两处定义，后一处把前一处的渐变覆盖掉了——只留这一处。
 * 渐变两端都压深过：原来的 #e0345c→#ef7a3d 让白字只有 3.44:1，
 * 现在是 5.45:1 / 4.89:1，白字达标。
 */
body.jh-light .onsale {
	background: linear-gradient(135deg, #c62b4e, #bd4f18) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(198, 43, 78, .28);
}

/* =============================================================
   8. 商品详情
   ============================================================= */

body.jh-light .jh-meta-pill {
	background: var(--jh-card-hover) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}
body.jh-light .jh-meta-pill em { color: var(--jh-text-faint) !important; }

body.jh-light .single_add_to_cart_button,
body.jh-light .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	color: #fff !important;
}

body.jh-light .woocommerce-tabs ul.tabs li a { color: var(--jh-text-dim) !important; }
body.jh-light .woocommerce-tabs ul.tabs li.active a { color: var(--jh-text) !important; }

body.jh-light .star-rating span::before,
body.jh-light p.stars a { color: var(--jh-warn) !important; }

/* =============================================================
   9. 表单 / 按钮
   ============================================================= */

body.jh-light input[type="text"],
body.jh-light input[type="email"],
body.jh-light input[type="password"],
body.jh-light input[type="tel"],
body.jh-light input[type="number"],
body.jh-light input[type="search"],
body.jh-light select,
body.jh-light textarea,
body.jh-light .select2-container .select2-selection {
	background: var(--jh-bg-elev) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}

body.jh-light input::placeholder,
body.jh-light textarea::placeholder { color: var(--jh-text-faint); }

body.jh-light .woocommerce-input-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--jh-text) !important;
}

/*
 * 通用按钮
 *
 * dark.css 那条 `body.jh-dark button, body.jh-dark input[type=submit],
 * body.jh-dark .button, …` 给**所有**按钮铺的是蓝紫渐变底
 * （linear-gradient(var(--jh-accent), var(--jh-accent-2))），浅色模式也一样
 * （body 上的 jh-dark 是主题标记，两种配色都在）。
 *
 * 之前这里配的是深色字，于是成了「近黑字压蓝紫渐变」，实测 3.3:1。
 * 浅色调色板的 accent 是 #2a68e0、accent-2 是 #7a45e0，配白字本来就有
 * 5.05:1 / 5.41:1 —— 字色选错而已，改回白色即可。
 *
 * 商品列表里的按钮不走这条：light.css 中 `ul.products li.product .button`
 * 特异性更高，会自己铺浅色底 + 深色字。
 */
body.jh-light .woocommerce-Button,
body.jh-light button.button:not(.single_add_to_cart_button),
body.jh-light input.button:not(.single_add_to_cart_button),
body.jh-light a.button:not(.single_add_to_cart_button) {
	color: #fff !important;
}

/* =============================================================
   10. 购物车 / 结算 / 会员中心
   ============================================================= */

body.jh-light .site-header-cart .widget_shopping_cart {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
	box-shadow: var(--jh-shadow-lg);
}

body.jh-light .woocommerce-cart-form,
body.jh-light .cart_totals,
body.jh-light .woocommerce-checkout-review-order,
body.jh-light .woocommerce-MyAccount-navigation,
body.jh-light .woocommerce-MyAccount-content,
body.jh-light .woocommerce-order {
	background: transparent;
	color: var(--jh-text);
}

body.jh-light .woocommerce-MyAccount-navigation ul li a {
	color: var(--jh-text-dim) !important;
}
body.jh-light .woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--jh-accent) !important;
}

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

body.jh-light .wc-block-components-notice-banner {
	background: var(--jh-card) !important;
	color: var(--jh-text) !important;
	border-color: var(--jh-border) !important;
}

/* =============================================================
   11. 物流面板
   ============================================================= */

body.jh-light .jh-shipment {
	background: var(--jh-card) !important;
	border-color: var(--jh-border-soft) !important;
	box-shadow: var(--jh-shadow);
}
body.jh-light .jh-shipment__row code {
	background: var(--jh-card-hover) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}
body.jh-light .jh-timeline__item::before,
body.jh-light .jh-timeline__item::after {
	background: var(--jh-border) !important;
}
body.jh-light .jh-timeline__dot {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
}

body.jh-light .jh-stage {
	background: var(--jh-card-hover) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text-dim) !important;
}
body.jh-light .jh-stage--preparing { border-color: rgba(168, 105, 10, .45) !important; color: #8a5606 !important; }
body.jh-light .jh-stage--shipped   { border-color: var(--jh-accent-soft) !important; color: var(--jh-accent) !important; }
body.jh-light .jh-stage--delivered {
	border-color: rgba(15, 143, 99, .40) !important;
	color: #0b7a54 !important;
	background: rgba(15, 143, 99, .10) !important;
}

/* =============================================================
   12. 邮箱验证面板与提示条
   ============================================================= */

body.jh-light .jh-verify-panel {
	background: var(--jh-card) !important;
	border-color: rgba(168, 105, 10, .45) !important;
	box-shadow: var(--jh-shadow);
}
body.jh-light .jh-verify-panel__lead strong { color: var(--jh-text); }

body.jh-light .jh-verify-panel__code input {
	background: var(--jh-bg-elev) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}

body.jh-light .jh-verify-panel__send .button {
	background: var(--jh-card-hover) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}

body.jh-light .jh-verify-panel__msg--ok {
	background: rgba(15, 143, 99, .10) !important;
	border-color: rgba(15, 143, 99, .35) !important;
	color: #0b7a54 !important;
}
body.jh-light .jh-verify-panel__msg--err {
	background: rgba(212, 43, 80, .09) !important;
	border-color: rgba(212, 43, 80, .35) !important;
	color: #b01f40 !important;
}

body.jh-light .jh-verify-badge {
	background: rgba(168, 105, 10, .12) !important;
	border-color: rgba(168, 105, 10, .40) !important;
	color: #8a5606 !important;
}

body.jh-light .jh-verify-toast {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
	box-shadow: var(--jh-shadow-lg);
}
body.jh-light .jh-verify-toast a { color: var(--jh-accent); }
body.jh-light .jh-verify-toast--ok  { border-color: rgba(15, 143, 99, .45) !important; }
body.jh-light .jh-verify-toast--err { border-color: rgba(212, 43, 80, .45) !important; }
body.jh-light .jh-verify-toast--warn { border-color: rgba(168, 105, 10, .45) !important; }

/* =============================================================
   13. 首页环绕区块
   ============================================================= */

body.jh-light .jh-orbit__cat {
	background: var(--jh-card) !important;
	border-color: var(--jh-border-soft) !important;
	box-shadow: var(--jh-shadow-lg);
}
body.jh-light .jh-orbit__cat-name { color: var(--jh-text); }
body.jh-light .jh-orbit__cat:hover .jh-orbit__cat-name { color: var(--jh-accent); }

body.jh-light .jh-orbit__prod {
	background: var(--jh-card) !important;
	border-color: var(--jh-border-soft) !important;
}

/* 中心光核：白底上要更淡 */
body.jh-light .jh-orbit__core {
	background:
		radial-gradient(circle at 50% 50%, rgba(47, 111, 228, .16), transparent 64%),
		radial-gradient(circle at 62% 38%, rgba(123, 76, 224, .12), transparent 60%);
}

body.jh-light .jh-orbit__stage {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* =============================================================
   14. 页脚与手机底栏
   ============================================================= */

body.jh-light .site-footer {
	background: #eef1f6 !important;
	border-top-color: var(--jh-border) !important;
}
body.jh-light .site-footer .widget-title,
body.jh-light .site-footer h2 { color: var(--jh-text) !important; }
body.jh-light .site-footer a { color: var(--jh-text-dim); }
/* 页脚版权行。页脚底本身带一层蓝紫淡染，比纯白暗，所以这里用 dim 而不是 faint */
body.jh-light .site-info { color: var(--jh-text-dim) !important; }

/*
 * 手机底栏 = 浮起来的玻璃坞（结构见 dark.css 的手机端小节）
 *
 * 那里只写了配色相关的部分，剩下的布局/图标/选中态用 body.jh-dark 前缀，
 * 两种配色共用。这里把坞体本身换成浅色的毛玻璃。
 */
body.jh-light .storefront-handheld-footer-bar {
	background: transparent !important;
	border-top: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
body.jh-light .storefront-handheld-footer-bar ul {
	background: rgba(255, 255, 255, .80) !important;
	border-color: rgba(42, 104, 224, .12) !important;
	box-shadow: 0 10px 32px rgba(23, 32, 56, .14), 0 2px 6px rgba(16, 20, 29, .05) !important;
}
body.jh-light .storefront-handheld-footer-bar ul li > a {
	color: var(--jh-text-dim) !important;
}
/* 选中态：浅色下用更实的淡蓝药丸 + 深一档的强调色，保证白底上够清楚 */
body.jh-light.jh-cur-account .storefront-handheld-footer-bar ul li.my-account > a,
body.jh-light.jh-cur-cart .storefront-handheld-footer-bar ul li.cart > a,
body.jh-light .storefront-handheld-footer-bar ul li.search.active > a {
	background: rgba(42, 104, 224, .13) !important;
	color: #1a4dbb !important;
}
/* 件数气泡的描边要跟着坞体底色（浅色下是白），用卡片色 */
body.jh-light .storefront-handheld-footer-bar ul li.cart .count {
	border-color: #ffffff !important;
}
body.jh-light .storefront-handheld-footer-bar .site-search {
	background: var(--jh-card) !important;
	border-color: var(--jh-border) !important;
}
body.jh-light .storefront-handheld-footer-bar .site-search input[type="search"] {
	background: var(--jh-bg-elev) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text) !important;
}

/* =============================================================
   15. 光标光晕 —— 暗色下是蓝紫辉光，白底上要几乎看不见
   ============================================================= */

body.jh-light .jh-cursor-glow {
	background: radial-gradient(
		circle,
		rgba(47, 111, 228, .07) 0%,
		rgba(123, 76, 224, .04) 38%,
		transparent 68%
	);
}

/* =============================================================
   16. 主题切换按钮
   ============================================================= */

/*
 * ⚠️ 选择器必须写成 `body.jh-dark .jh-theme-toggle`（两级类），
 * 不能只写 `.jh-theme-toggle`。
 *
 * dark.css 有一条通用按钮规则：
 *     body.jh-dark button, body.jh-dark input[type="submit"] {
 *         background: linear-gradient(...) !important;
 *         color: #fff !important;
 *     }
 * 它会把本按钮也一起管掉，而且特异性 (0,1,2) 高于单独的类选择器 (0,1,0)，
 * 光加 !important 也压不住 —— 结果是按钮被套上品牌渐变、图标变纯白，
 * 在浅色模式下就成了「白底白图标」，看起来是个空按钮（踩过两次）。
 *
 * `body.jh-dark .jh-theme-toggle` 的特异性是 (0,2,1)，比它高，才压得住。
 */
body.jh-dark .jh-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	background: rgba(21, 25, 34, .9) !important;
	border: 1px solid var(--jh-border) !important;
	color: var(--jh-text) !important;
	backdrop-filter: blur(10px);
	transition: border-color .22s ease, color .22s ease, transform .22s cubic-bezier(.2,.8,.25,1);
}

body.jh-dark .jh-theme-toggle:hover {
	border-color: var(--jh-accent-soft) !important;
	color: #8fb6ff !important;
	transform: rotate(-15deg);
}

/* 按钮里两个图标，按当前模式显示其中一个 */
.jh-theme-toggle svg { width: 16px; height: 16px; display: none; }
body.jh-dark:not(.jh-light) .jh-theme-toggle .jh-icon-sun  { display: block; } /* 暗色下显示太阳 = 点了变亮 */
body.jh-light .jh-theme-toggle .jh-icon-moon { display: block; }                 /* 浅色下显示月亮 = 点了变暗 */

body.jh-light .jh-theme-toggle {
	background: rgba(255, 255, 255, .94) !important;
	border-color: var(--jh-border) !important;
	color: var(--jh-text-dim) !important;
	box-shadow: 0 2px 10px rgba(23, 32, 56, .06);
}
body.jh-light .jh-theme-toggle:hover {
	border-color: var(--jh-accent) !important;
	color: var(--jh-accent) !important;
}

@media (max-width: 560px) {
	.jh-theme-toggle { width: 32px; height: 32px; }
}

/* =============================================================
   17. 色彩点缀
   -------------------------------------------------------------
   暗色模式的色彩来自「发光」——辉光、渐变描边、卡片高光，
   这些在白底上不明显。所以浅色模式改用另一套手法提供颜色：

     · 卡片用「白 → 浅彩」的微渐变，而不是纯白
     · 描边和阴影带色相
     · 不同区块给不同色相，避免整页一个调子
   ============================================================= */

/* 信任条：四条各给一个色相，一眼看过去不再是四块一样的白 */
body.jh-light .jh-trust__item:nth-child(1) {
	background: linear-gradient(160deg, #ffffff 30%, #eaf1ff 100%) !important;
	border-color: #d3e0fa !important;
}
body.jh-light .jh-trust__item:nth-child(2) {
	background: linear-gradient(160deg, #ffffff 30%, #e6f8f1 100%) !important;
	border-color: #cdeade !important;
}
body.jh-light .jh-trust__item:nth-child(3) {
	background: linear-gradient(160deg, #ffffff 30%, #ffeef2 100%) !important;
	border-color: #f8d7e0 !important;
}
body.jh-light .jh-trust__item:nth-child(4) {
	background: linear-gradient(160deg, #ffffff 30%, #f3ecff 100%) !important;
	border-color: #e2d6fa !important;
}

body.jh-light .jh-trust__item:nth-child(1) .jh-trust__icon { color: #2a68e0; background: rgba(42, 104, 224, .11); }
body.jh-light .jh-trust__item:nth-child(2) .jh-trust__icon { color: #0d8a5f; background: rgba(13, 138, 95, .11); }
body.jh-light .jh-trust__item:nth-child(3) .jh-trust__icon { color: #d42b50; background: rgba(212, 43, 80, .10); }
body.jh-light .jh-trust__item:nth-child(4) .jh-trust__icon { color: #7a45e0; background: rgba(122, 69, 224, .11); }

/* 商品卡：白 → 极浅蓝的微渐变，悬停再深一点，避免整片纯白 */
body.jh-light ul.products li.product {
	background: linear-gradient(180deg, #ffffff 55%, #f6f9ff 100%) !important;
	border-color: #e0e8f6 !important;
}
body.jh-light ul.products li.product:hover {
	background: linear-gradient(180deg, #ffffff 40%, #eef4ff 100%) !important;
	border-color: var(--jh-accent-soft) !important;
	box-shadow: var(--jh-shadow-lg), var(--jh-glow) !important;
}

/* 分类卡：底部扫出的强调线保持渐变，但描边也带上色 */
body.jh-light ul.products li.product-category {
	box-shadow: var(--jh-shadow-lg);
}

/* 区块标题下方那条装饰线本来就渐变，这里让它在白底上更显眼 */
body.jh-light .section-title + * ,
body.jh-light .storefront-product-section .section-title { position: relative; }

/* 环绕区块：中心光核在白底上要能看见，否则球心是空的 */
body.jh-light .jh-orbit__core {
	background:
		radial-gradient(circle at 50% 50%, rgba(42, 104, 224, .22), transparent 62%),
		radial-gradient(circle at 64% 36%, rgba(122, 69, 224, .18), transparent 58%);
	filter: blur(8px);
}

/* 环绕的分类卡片：底部加一抹色，和纯白商品卡区分开 */
body.jh-light .jh-orbit__cat {
	background: linear-gradient(170deg, #ffffff 55%, #eef3ff 100%) !important;
	border-color: #dbe5f7 !important;
}

/* 环绕的商品缩略图 */
body.jh-light .jh-orbit__prod {
	border-color: #dbe5f7 !important;
	box-shadow: 0 4px 14px rgba(42, 104, 224, .10);
}

/* 页脚：用带紫调的浅色，和正文的冷蓝拉开一点 */
body.jh-light .site-footer {
	background: linear-gradient(180deg, #e9edf8 0%, #e3e6f5 100%) !important;
	border-top-color: #d5dbec !important;
}

/* 会员中心导航：当前项给个色块背景，而不是只换个文字色 */
body.jh-light .woocommerce-MyAccount-navigation ul li.is-active a {
	background: linear-gradient(90deg, rgba(42, 104, 224, .10), rgba(122, 69, 224, .06));
	border-left-color: var(--jh-accent);
}

/* 价格：跟随强调色，促销价用红，让商品卡里有一处亮点 */
body.jh-light ul.products li.product .price {
	color: #1f5ed6 !important;
	font-weight: 700;
}

/* 「特价」标签的样式统一在第 7 节定义，这里原本有一份重复的已被合并过去 */