/**
 * MOSAIC 前台：统一配色层
 *
 * 定位：只做颜色统一，不改任何版式（宽高、间距、定位、栅格一概不动）。
 * 版式已回退到改造前的结构，这一层把散落在各处的近似色收敛成一套 token：
 *
 *   墨色 #16181d    替代 #000 / #1c1c1c / #2a2a2a / #33322f / #2c2c2a
 *   品牌黄 #ffd60a  替代 #fff164 及其它零散黄
 *   描边灰 #e8ebf0  替代 #ededE8 / #e5e5e5 / #dddddd / #ebebe6
 *   次要灰 #6b7280  替代 #5d5d59 / #6a6a65 / #8a8a8a / #9b9b95
 *   价格红 #c8102e  替代 #c00（全站价格只保留这一个红）
 *
 * 加载顺序：mosaic-ui.css 之后（见 widgets/head.php）。
 * 想再调品牌色，只改下面 :root 里的变量即可。
 */

:root {
	--mo-ink: #16181d;
	--mo-brand: #ffd60a;
	--mo-line: #e8ebf0;
	--mo-muted: #6b7280;
	--mo-price: #c8102e;
}

/* ---------- 顶栏 ---------- */
#top_nav {
	background-color: var(--mo-ink);
}

/* ---------- 标题栏 ---------- */
.top_header .seachBtn {
	background-color: var(--mo-ink);
}

.top_header .seachBtn:hover {
	background-color: #000;
}

.top_header .top_seachBox {
	background: #f5f6f8;
	border-color: var(--mo-line);
}

.top_header .top_seachBox:focus-within {
	border-color: #c9ced6;
}

.top_header .searchArea::placeholder {
	color: var(--mo-muted);
}

.top_header_tools .lego-entry__link {
	border-color: var(--mo-line);
	color: var(--mo-ink);
}

.top_header_tools .lego-entry__link:hover {
	background-color: var(--mo-ink);
	border-color: var(--mo-ink);
	color: #fff;
}

/* ---------- 首页 hero ---------- */
.mosaic-hero {
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, #2b313a 0%, #1d232b 45%, var(--mo-ink) 100%);
}

.mosaic-hero__title {
	color: var(--mo-ink);
}

.mosaic-hero__sub {
	color: #5b636e;
}

/* 主 CTA：形状（60×384、圆角 3px）保持原样，配色收到「品牌黄底 + 墨色字」，
   和页头识图入口、页脚订阅按钮共用同一套强调色。
   若想回到原来的「墨色底 + 黄字」：把下面两处 background-color 换成 var(--mo-ink)、
   color 换成 var(--mo-brand) 即可。 */
.mosaic-hero a.mosaic-hero__btn {
	background-color: var(--mo-brand);
	color: var(--mo-ink);
}

.mosaic-hero a.mosaic-hero__btn:hover {
	background-color: #f2c200;
	color: var(--mo-ink);
}

.mosaic-hero__link {
	color: var(--mo-muted);
}

.mosaic-hero__link:hover {
	color: var(--mo-ink);
}

/* ---------- 特性卡 ---------- */
.mosaic-feat {
	border-color: var(--mo-line);
}

.mosaic-feat__icon {
	color: var(--mo-ink);
}

.mosaic-feat__title {
	color: var(--mo-ink);
}

.mosaic-feat__text {
	color: #5b636e;
}

.mosaic-feat__text strong {
	color: var(--mo-price);
}

/* ---------- 商品区 ---------- */
.home-products__title {
	border-bottom-color: var(--mo-ink);
	color: var(--mo-ink);
}

.home-products__count,
.home-products__empty {
	color: var(--mo-muted);
}

.home-product {
	border-color: var(--mo-line);
}

.home-product__name a {
	color: var(--mo-ink);
}

.home-product__name a:hover {
	color: var(--mo-price);
}

.home-product .c_price .price {
	color: var(--mo-price);
}

.home-product .c_price .special_price {
	color: var(--mo-muted);
}

.home-products__page {
	border-color: var(--mo-line);
	color: var(--mo-ink);
}

.home-products__page:hover {
	border-color: var(--mo-ink);
}

.home-products__page.is-current {
	background: var(--mo-ink);
	border-color: var(--mo-ink);
	color: #fff;
}

/* ---------- 页脚 ---------- */
.mt-footer__benefits {
	border-bottom-color: var(--mo-line);
}

.mt-footer__title {
	color: var(--mo-ink);
}

.mt-footer a.mt-social {
	border-color: var(--mo-line);
	color: var(--mo-ink);
}

.mt-footer a.mt-social:hover {
	border-color: var(--mo-ink);
}

.mt-footer__links a,
.mt-footer__news-text {
	color: #3d434d;
}

.mt-footer .mt-footer__input {
	border-color: var(--mo-line);
}

.mt-footer button.mt-footer__submit {
	background-color: var(--mo-ink);
}

.mt-footer button.mt-footer__submit:hover {
	background-color: #000;
}

.mt-footer__copy {
	color: var(--mo-muted);
}