/* Physical filename versioned because the production CDN ignores CSS query strings. */
/* v4.5.8 homepage product grid with the JNGDA 2+4+2+4 layout (2026-08-14). */
:root{--ink:#303133;--ink-2:#333;--ink-3:#666;--muted:#777;--paper:#fff;--soft:#f4f4f2;--product-media-bg:#f7f7f7;--line:#eaeaea;--line-2:#ddd;--line-3:#ececec;--pad:5vw;--max:1920px}
/* ============================================================
间距标尺（4px 基准 / 8 的倍数为主）—— 全站唯一间距来源
行业通行做法：**4pt 或 8pt 网格**，组件内外边距只取标尺上的值。
本站在此定稿，**新写样式一律用这些变量，不要再手写任意 px**。
--space-1: 4px 最小间隙（图标与文字、徽标偏移）
--space-2: 8px 紧凑间隙（标签与输入框、列表项内）
--space-3: 12px 控件间（按钮之间）
--space-4: 16px 小间隔
--space-5: 24px 块内分组（标题→正文）
--space-6: 32px 卡片内边距
--space-7: 48px 卡片间、卡片内上下
--space-8: 64px 小节能段
--space-9: 96px 大节分隔
**区块与页脚之间 = --space-9（96px），且不得超过一层** ——
本项目曾因「容器 padding + 页面 padding + 页脚 margin 三层叠加」
造出 278px 空白（实测）。
============================================================ */
:root{
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
--section-gap:var(--space-9);
}
/* ============================================================
全站统一容器（单一来源）—— 治本，替代此前各页面各自定义的 max-width。
背景：此前 .shop-grid / .shop-archive / .jngda-single / .jngda-cart-wrap /
.jngda-page / .jngda-single-content / .site-header__inner 各自定义宽度，
导致不同页面宽度不一致（实测商品页曾比首页窄 421px），且改一处另一处又错。
现在：所有页面容器统一套用 .jngda-container 的规则，只改 --content-max 一处即可全站生效。
============================================================ */
/* --content-max 取值依据：
① 你的实际窗口 ≈1388–1400px → 该上限不触发，内容接近满宽（与 JNGDA 首页观感一致）；
② 再宽则居中收口（你选的 B 方案），避免超宽屏上正文行过长；
③ 1760px 使 1440/1600/1780 三档过渡连续，不出现"某宽度突然变窄"。 */
:root{--content-max:1760px;--content-pad:72px}
.jngda-container,
.shop-grid,.shop-archive,.jngda-single,.jngda-cart-wrap,.jngda-page,.jngda-single-content,.jngda-product-tabs,.jngda-home-benefits__inner,
.site-header__inner,.site-footer__inner{
max-width:var(--content-max);
margin-left:auto;
margin-right:auto;
padding-left:var(--content-pad);
padding-right:var(--content-pad);
box-sizing:border-box;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:15px;font-weight:400;-webkit-font-smoothing:antialiased}
body.admin-bar .site-header{top:32px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
/* overflow 必须 visible —— 搜索浮层以 absolute 挂在页头下缘，裁切会把它藏掉 */
.site-header{position:sticky;top:0;z-index:1000;overflow:visible;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.04)}
/* 页头容器与商品网格保持**同一套居中逻辑**，否则宽视口下两者左边界会错位
（曾实测 2560px 视口下 logo 在 440px 而商品卡在 108px，差 334px）。
统一为：max-width 1920 + 居中 + 左右 72px 固定内边距。 */
/* padding 必须与 .shop-grid 完全一致（含断点），否则不同视口下左边界会错开 */
/* 页头、首页商品区与所有页面共用同一条 --content-pad 内容线。 */
.site-header__inner{height:79px;display:flex;align-items:center;gap:40px;overflow:hidden;padding-left:var(--content-pad);padding-right:var(--content-pad)}
/* 站点字标：200×36 容器（字标 5.472 比例，高 36px 需约 197px 宽）；矢量 SVG 不自失真 */
/* 与商品图左侧对齐：卡片有 36px 内边距，商品图实际从 108px 开始（页面栅格 72 + 36）。
只给 logo 加这段间距，不影响导航与右侧图标。 */
/* 与商品卡片左外侧边缘对齐（页面栅格线 x=72），非卡片内部图片边缘 */
/* 与商品卡片左边缘对齐（= 页面栅格线）。页头容器与 .shop-grid 用同一套
max-width:1920 + 居中 + 同一断点内边距（72 / 44 / 36），故 logo 无需任何额外偏移。 */
/* 宽度跟随内容 —— 曾写死 480px（当时 logo 较大）；logo 缩小后多占 367px 空白，
把导航推到 x=704（看似居中）。改为 max-content 后导航紧贴 logo。 */
/* 尺寸 = 墨迹尺寸（88×16）；图片以原版画布 234×69 渲染后用 absolute 负偏移挪入，
故本容器不承担画布宽度，flex 间隔不受影响。 */
/* 垂直居中：容器 20px、图片 14px，display:block 时图片贴顶 → 图片中心比导航文字高 3px。
改为 flex 居中后图片中心 = 页头中心（实测 1400/1920 均对齐）。 */
.site-logo{display:flex;align-items:center;width:110px;height:20px;flex:0 0 auto;text-decoration:none}
/* 主题自带 SVG 字标 */
/* !important 保险：此规则曾因各类覆盖/缓存问题失效，导致 logo 按 SVG 原始尺寸
（720×134）渲染并撑爆页头。加 !important 消除一切优先级争议。 */
/* 尺寸以 ![]()
上的内联样式为准（见 functions.php 的 jngda_logo()）。
此处【不加 !important】，否则会盖掉内联样式，导致尺寸改不动。 */
.site-logo img{display:block;object-fit:contain}
/* 可点击按钮统一手型光标（