/* ==========================================================================
   iPartsMall Child — 全局设计令牌与基础层
   视觉基准：wp-site-prototype/index.html
   ==========================================================================

   设计约定（改这站前先读这 5 行）：
   1. 所有新写的 CSS 一律用 --ns-* 里定义的令牌，禁止在此文件里再硬编码色值。
   2. 覆盖 Blocksy 时优先「改它的变量」，改不动才「写选择器覆盖」。
      变量统一写在 html:root（特异性 0,1,1）里——比 Blocksy 自己用的 :root（0,1,0）
      高一级，所以无论谁后加载都稳赢，不依赖加载顺序。
   3. 层级顺序：@font-face → 令牌 → Blocksy 变量映射 → 基础排版 → 组件。
   4. 不要动这一步之外的东西，后面几步会按区块继续往这个文件里追加。
   ========================================================================== */


/* ==========================================================================
   1. Inter —— 自托管（latin + latin-ext 两个子集，合计约 130KB）
   没有走 Google Fonts CDN：少两次跨域握手，LCP 更快，也不受地区屏蔽影响。
   字体版本：Inter v20 variable，字重区间 400–800。
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. 设计令牌 —— 与原型 :root 一一对应
   ========================================================================== */

html:root {
	/* 背景 */
	--ns-bg: #ffffff;
	--ns-bg-soft: #f6f8fc;
	--ns-bg-tint: #eef3fb;

	/* 文字 */
	--ns-ink: #0b1220;
	--ns-ink-2: #334155;
	--ns-muted: #64748b;

	/* 线条 */
	--ns-line: #e6eaf2;

	/* 品牌色 */
	--ns-brand: #1d4ed8;
	--ns-brand-2: #3b82f6;
	--ns-brand-deep: #0b2a6b;
	--ns-brand-soft: #e8efff;
	--ns-brand-hover: #1740b8;

	/* 渠道色 —— WhatsApp 官方品牌绿（浮窗专用，勿挪作他用） */
	--ns-wa: #25d366;
	--ns-wa-hover: #1ebe5b;
	--ns-wa-ring: rgba(37, 211, 102, 0.35);

	/* 状态色 */
	--ns-ok: #16a34a;
	--ns-ok-soft: #e8f7ee;
	--ns-ok-text: #12703c;
	--ns-warn: #d97706;
	--ns-warn-soft: #fef3e2;
	--ns-danger: #b42318;
	--ns-danger-soft: #fee2e2;

	/* 圆角 */
	--ns-radius: 14px;
	--ns-radius-sm: 10px;
	--ns-radius-lg: 22px;
	--ns-radius-pill: 999px;

	/* 阴影 —— 原型里的原值，偏柔和悬浮感 */
	--ns-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 3px rgba(11, 18, 32, 0.06);
	--ns-shadow-md: 0 10px 30px rgba(11, 18, 32, 0.08);
	--ns-shadow-lg: 0 26px 64px rgba(11, 18, 32, 0.14);

	/* 布局 */
	--ns-max: 1200px;
	--ns-gutter: 24px;
}


/* ==========================================================================
   3. Blocksy 变量映射 —— 把上面这套令牌接到 Blocksy 的瓦发挥线上
   Blocksy 自带的 8 色调色板语义：
   color-1=强调色 / 2=强调色 hover / 3=次要文字 / 4=正文深色 / 5=描边 / 6=浅背景 / 7=更浅背景 / 8=白
   ========================================================================== */

html:root {
	/* --- 调色板 --- */
	--theme-palette-color-1: var(--ns-brand);        /* 强调色 */
	--theme-palette-color-2: var(--ns-brand-hover);  /* 强调色 hover */
	--theme-palette-color-3: var(--ns-muted);        /* 次要文字 */
	--theme-palette-color-4: var(--ns-ink);          /* 正文 / 标题深色 */
	--theme-palette-color-5: var(--ns-line);         /* 描边线 */
	--theme-palette-color-6: var(--ns-bg-tint);      /* 浅背景 */
	--theme-palette-color-7: var(--ns-bg-soft);      /* 更浅背景 */
	--theme-palette-color-8: var(--ns-bg);           /* 纯白 */

	/* Gutenberg 预设色也跟过来，编辑器里选色才不会又蹦出旧的紫 */
	--wp--preset--color--palette-color-1: var(--ns-brand);
	--wp--preset--color--palette-color-2: var(--ns-brand-hover);
	--wp--preset--color--palette-color-3: var(--ns-muted);
	--wp--preset--color--palette-color-4: var(--ns-ink);
	--wp--preset--color--palette-color-5: var(--ns-line);
	--wp--preset--color--palette-color-6: var(--ns-bg-tint);
	--wp--preset--color--palette-color-7: var(--ns-bg-soft);
	--wp--preset--color--palette-color-8: var(--ns-bg);

	/* --- 排版 --- */
	--theme-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	--theme-font-stack-default: 'Inter', system-ui, -apple-system, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	--theme-font-size: 16px;
	--theme-line-height: 1.6;
	--theme-font-weight: 400;
	--theme-letter-spacing: 0;
	--theme-text-color: var(--ns-ink-2);

	/* --- 标题 --- */
	--theme-headings-color: var(--ns-ink);
	--theme-heading-color: var(--ns-ink);
	--theme-heading-1-color: var(--ns-ink);
	--theme-heading-2-color: var(--ns-ink);
	--theme-heading-3-color: var(--ns-ink);
	--theme-heading-4-color: var(--ns-ink);
	--theme-heading-5-color: var(--ns-ink);
	--theme-heading-6-color: var(--ns-ink);

	/* --- 链接 --- */
	--theme-link-initial-color: var(--ns-ink-2);
	--theme-link-hover-color: var(--ns-brand);
	--theme-link-active-color: var(--ns-brand);

	/* --- 描边 / 圆角 / 阴影 --- */
	--theme-border-color: var(--ns-line);
	--theme-border-radius: var(--ns-radius);
	--theme-box-shadow: var(--ns-shadow-sm);

	/* --- 按钮（对齐原型 .btn：圆角 11px / 700 / 14.5px / 12px 20px） --- */
	--theme-button-background-initial-color: var(--ns-brand);
	--theme-button-background-hover-color: var(--ns-brand-hover);
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-border-radius: 11px;
	--theme-button-min-height: 46px;
	--theme-button-padding: 12px 20px;
	--theme-button-font-size: 14.5px;
	--theme-button-font-weight: 700;
	--theme-button-text-transform: none;
	--theme-button-letter-spacing: 0;
	--theme-button-shadow: 0 6px 18px rgba(29, 78, 216, 0.24);

	/* --- 表单（对齐原型 .fld input：圆角 10px / 背景 --bg-soft） --- */
	--theme-form-field-border-radius: var(--ns-radius-sm);
	--theme-form-field-border-initial-color: var(--ns-line);
	--theme-form-field-border-focus-color: var(--ns-brand-2);
	--theme-form-field-background-initial-color: var(--ns-bg-soft);
	--theme-form-field-background-focus-color: var(--ns-bg);
	--theme-form-field-height: auto;
	--theme-form-field-padding: 11px 13px;
	--theme-form-font-size: 14px;
	--theme-form-text-initial-color: var(--ns-ink);

	/* --- 购物车角标 --- */
	--theme-cart-badge-background: var(--ns-brand);
	--theme-cart-badge-text: #ffffff;

	/* --- 容器宽度 ---
	   ⚠️ 这里绝不能写 --theme-container-width: 100%：
	   Blocksy 原生用 min(100%, calc(edge-spacing - frame)) 给容器「视口减两侧留白」收宽，
	   写死 100% 后移动端所有正文容器全宽贴边（2026-10-15 修复）。
	   现改为直接声明同一公式：桌面照常被 max-width 1200 截住，窄屏两侧各留一个 gutter。 */
	--theme-container-width: min(100%, calc(100vw - var(--ns-gutter) * 2));
	--theme-normal-container-max-width: var(--ns-max);
	--theme-narrow-container-max-width: 840px;
	--theme-container-edge-spacing: calc(100vw - var(--ns-gutter) * 2);
	--theme-block-max-width: var(--ns-max);
	--theme-block-wide-max-width: 1400px;
}


/* ==========================================================================
   4. 基础排版
   ========================================================================== */

body {
	font-family: var(--theme-font-family);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ns-ink-2);
	background: var(--ns-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-headline {
	font-family: var(--theme-font-family);
	color: var(--ns-ink);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(30px, 4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(20px, 2.2vw, 25px); }
h4 { font-size: clamp(17px, 1.6vw, 20px); }
h5 { font-size: 16px; }
h6 { font-size: 14.5px; }

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--ns-brand);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 选中态也用品牌色，细节一致 */
::selection {
	background: var(--ns-brand-soft);
	color: var(--ns-ink);
}


/* ==========================================================================
   5. 通用容器 —— 后续自定义区块统一用 .ns-wrap，宽度/留白与原型 .wrap 一致
   ========================================================================== */

.ns-wrap {
	width: 100%;
	max-width: var(--ns-max);
	margin-inline: auto;
	padding-inline: var(--ns-gutter);
}

/* 容器（.ct-container / .ct-container-narrow）自身已按视口收窄留边（见上方容器宽度），
   嵌在里面的 .ns-wrap 不再二次叠加内边距，否则窄屏左右各多出 24px。
   注意：首页正文容器是 .ct-container-full（全宽），不在匹配范围，
   首页留白仍由 .ns-wrap 自己负责 —— 这条刻意只匹配窄容器类名。 */
.ct-container .ns-wrap,
.ct-container-narrow .ns-wrap {
	padding-inline: 0;
}


/* ==========================================================================
   6. 可复用原子件 —— 后面几步的区块会反复用
   （先放基类，具体区块在第 2/3 步各自调整）
   ========================================================================== */

.ns-card {
	background: var(--ns-bg);
	border: 1px solid var(--ns-line);
	border-radius: var(--ns-radius-lg);
	box-shadow: var(--ns-shadow-sm);
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.ns-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ns-shadow-md);
	border-color: #c9dbfb;
}

/* 小标题：原型 .kicker —— 全大写、宽字距的蓝色标签 */
.ns-kicker {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ns-brand);
}

/* 渐变编号块：原型 .why .no —— Why us 里的 01/02/03 */
.ns-no {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(140deg, var(--ns-brand), #22d3ee);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 15px;
}

/* 星星：原型 .stars */
.ns-stars {
	font-size: 12px;
	color: var(--ns-warn);
	font-weight: 700;
}


/* ==========================================================================
   7. 移动端（原型里 1200 / 980 / 720 三档断点，这里同步）
   ========================================================================== */

@media (max-width: 720px) {
	html:root {
		--ns-gutter: 18px;
	}

	body {
		font-size: 15.5px;
	}
}

/* ---------- 归档页横幅（hero-section）：浅底深字 ----------
   背景已在 customizer 改为 palette-6；这里兜底面包屑配色，
   防止全局 breadcrumbsFontColor（白字）在浅底上不可读 */
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs .ct-breadcrumbs-separator {
	color: var(--ns-muted);
}

.hero-section .ct-breadcrumbs a {
	color: var(--ns-brand);
}

.hero-section .ct-breadcrumbs a:hover {
	color: var(--ns-brand-hover);
}

/* ---------- 归档页横幅（hero-section）：浅底深字 ----------
   背景已在 customizer 改为 palette-6；这里兜底面包屑配色，
   防止全局 breadcrumbsFontColor（白字）在浅底上不可读 */
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs .ct-breadcrumbs-separator {
	color: var(--ns-muted);
}

.hero-section .ct-breadcrumbs a {
	color: var(--ns-brand);
}

.hero-section .ct-breadcrumbs a:hover {
	color: var(--ns-brand-hover);
}

/* ---------- 商品卡片图：锁正方形等比，防 sizes=auto 懒加载布局失控 ----------
   现象：某卡片 img 高度被反馈环撑到 1260px 溢出裁剪 → 白屏。
   强制 height=width（aspect-ratio 1:1），任何原图比例都等比缩放不变形。
   覆盖两类结构：
   ① 商店/分类页：ul.products > li.product
   ② 搜索结果页：.entries > article.product（Blocksy 给这里默认 4:3 + cover，方图被裁上下 25%） */
.products li.product .ct-media-container img,
.products .product .ct-media-container img,
.entries article.product .ct-media-container img {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	width: 100% !important;
	object-fit: contain;
}

/* ---------- 搜索页表单（/product-search/，[ipm_search_form]） ----------
   复用 Blocksy 的 ct-search-form 样式，这里只限制宽度并居中 */
.ns-search-page-form {
	max-width: 620px;
	margin-inline: auto;
}

/* 提交按钮：Blocksy 默认只给图标大小（15px 圆点），放大成主按钮样式 */
.ns-search-page-form .ct-search-form button[type="submit"] {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--ns-brand, #1f5eff);
	color: #fff;
	display: grid;
	place-items: center;
	padding: 0;
}

.ns-search-page-form .ct-search-form button[type="submit"] svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}




/* ============================================================
   搜索页结果区（/product-search/?s=… 表单下方，2026-10-15）
   ============================================================ */
.ns-search-results {
	margin-top: 28px;
}

.ns-search-results .ns-search-count {
	margin: 0 0 18px;
	color: var(--ns-ink-2, #33415c);
	font-size: 15px;
	font-weight: 600;
}

/* 结果网格：复用 Woo 的 ul.products 结构，仅补齐页面内边距 */
.ns-search-results ul.products {
	margin: 0;
	padding: 0;
	width: 100%;
}

.ns-search-results .ns-search-pagination {
	margin-top: 28px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.ns-search-results .ns-search-pagination .page-numbers {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--ns-line, #e3e9f2);
	border-radius: 10px;
	background: #fff;
	color: var(--ns-ink-2, #33415c);
	font-size: 14px;
	text-decoration: none;
}

.ns-search-results .ns-search-pagination .page-numbers.current {
	background: var(--ns-brand, #1f5eff);
	border-color: var(--ns-brand, #1f5eff);
	color: #fff;
}

.ns-search-results .ns-search-pagination .page-numbers:hover:not(.current) {
	border-color: var(--ns-brand, #1f5eff);
	color: var(--ns-brand, #1f5eff);
}

.ns-search-results .ns-search-count {
	/* 无结果时只有这一行文字 */
}