/* ============================================================
   AI不眠 — 基础层 (reset + 排版 + a11y)
   依赖 tokens.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg-1);
	color: var(--ink-1);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.65;
	font-feature-settings: "tnum" on, "cv11" on;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	min-height: 100vh;                       /* fallback */
	min-height: 100dvh;                      /* V3.13: 动态视口,iOS 地址栏伸缩不抖,2022+ 浏览器 */
	display: flex;
	flex-direction: column;
}

/* 全站锁过卷（橡皮筋）防固定栏漂移 —— overscroll-behavior:none 关上下+左右橡皮筋/下拉刷新/侧滑返回
   → 过卷不再拖动固定底栏（华为/荣誉折叠屏自带浏览器曾报「下滑底栏跟着出去」；挂 html+body 双保险）。
   〔续28 修 bug〕**移除原 `body { overflow-x: hidden; overflow-x: clip; }`**：iOS Safari(WebKit) 下 body 上任何
   overflow-x（含 clip）会经「body→视口 overflow 传播」**破坏 position:fixed/sticky** → 顶栏搜索条(sticky) + 详情底部
   购买条(fixed) 滚动时漂移/不固定/错位（iPhone 15 Pro Safari 实报；Chrome/Blink 容忍故 headless 复现不出）。
   已 CDP 实测移除后 14 关键页**横向溢出=0**（本就无元素溢出、clamp 多余）；横向溢出改靠各元素自身收敛
   (min-width:0 / max-width:100%)，不再用 body overflow 夹断（亦合 CODEGEN-GUARDRAILS：禁 overflow-x:hidden）。 */
html { overscroll-behavior: none; }
body { overscroll-behavior: none; }

body.has-mobile-tabbar { padding-bottom: var(--mobile-tab-h); }

/* iOS 刘海屏：固定底栏自带 env(safe-area-inset-bottom) 而变高，body 底部留白要同步加上，
   否则页脚被底栏遮住约一个 home-indicator 高度。必须放在全站加载的 base.css
   （曾误置于仅首页 enqueue 的 front-page.css → 非首页全被遮）。 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	body.has-mobile-tabbar { padding-bottom: calc(var(--mobile-tab-h) + env(safe-area-inset-bottom)); }
}

@media (min-width: 1100px) {
	/* 底栏 tabbar 在 ≥1100 才隐藏（header-footer.css），故清除底部留白也必须用同一断点；
	   原 1025 会在 1025–1099 提前清留白 → tabbar 仍显但内容/页脚被其遮住（L-1）。 */
	body.has-mobile-tabbar { padding-bottom: 0; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img[loading="lazy"] { background: var(--bg-2); }

/* 头像统一正方形（全站）：上面的 `img{height:auto}` 及 WC 的 `.woocommerce img{height:auto}`（特异性
   0,1,1 更高）会把固定尺寸头像的 height 覆盖成 auto → 非正方形源图被拉成椭圆（顶栏/详情创作者卡/
   个人中心/排行榜… 都中招）。各头像组件均已设 width（不受 height:auto 影响），这里用 aspect-ratio
   从 width 推出正方形高度（不与 height:auto 抢特异性、而是协同）＋ object-fit:cover 裁切不拉伸，
   使全站头像在 WC / 非 WC 页一律正圆。
   🔴〔0.4.747·X112〕aspect-ratio 只救新内核——老内核（vivo/X5 等）不认它，WC 页头像照样被
   height:auto 塌成椭圆（个人中心资料卡实测 96×52）。故下列每个定宽组件在其规则旁另有一条
   「老内核钉高」镜像（.woocommerce/.woocommerce-page 前缀 + height=该组件 width），本块保留
   = 新内核双保险 + 兜住 `.avatar` 这类无固定 px 的通用头像（其源图方形：字母 SVG 天然方 +
   上传经 Simple Local Avatars 方形裁切）。⚠️ 新增头像类两处都要补：下面列表 + 组件旁镜像钉高。 */
.avatar,                       /* WP get_avatar() 输出统称：问答/排行榜/WC 评论等 */
.b-avatar,                     /* 顶栏用户菜单 + 排行榜 */
.b-detail__creator-avatar,     /* 商品详情页 创作者卡 */
.b-creator-card__avatar,       /* 我的关注 创作者卡 */
.b-profile-avatar__img,        /* 编辑资料 头像区 */
.b-avatar-modal__preview-img,  /* 换头像弹窗 预览 */
.b-acct-avatar__img,           /* 个人中心 资料卡 */
.b-creator-rank__avatar,       /* 侧栏 创作者榜 */
.b-user-card__avatar,          /* 侧栏 用户卡 */
.b-card__author img,           /* 作品卡 / 问答卡 作者头像 */
.b-store-hero__avatar img {    /* Dokan 店铺头部 */
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

a {
	color: var(--brand);
	text-decoration: none;
	transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--brand-600); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-1); }
/* a11y：所有交互元素键盘聚焦显示品牌轮廓（:focus-visible 仅键盘、鼠标点击不显）。
   轮廓沿元素自身圆角；不写 border-radius 以免改变按钮/输入框形状。 */
button:focus-visible,
[role="button"]:focus-visible,
.b-btn:focus-visible,
.b-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--s-3);
	color: var(--ink-0);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(22px, 2.6vw, 28px); }
h3 { font-size: clamp(17px, 1.5vw, 20px); }
h4 { font-size: 16px; }
p  { margin: 0 0 var(--s-4); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--brand-200); color: var(--ink-0); }

button, input, textarea, select {
	font: inherit;
	color: inherit;
}

/* ============================================================
   a11y 工具类
   ============================================================ */
.b-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.b-skip-link {
	position: absolute; left: -9999px; top: var(--s-2);
	background: var(--btn-primary-bg); color: #fff;   /* 实心底 token(#6d4dff 白字 5.05、明暗都达 AA)；原 var(--brand) 暗色=#836aff 白字仅 3.84，不满足 DESIGN-LOCKED §9「跳过链接明暗皆可读」 */
	padding: var(--s-2) var(--s-4); border-radius: var(--r-2);
	z-index: var(--z-max);
}
.b-skip-link:focus { left: var(--s-4); color: #fff; }

/* ============================================================
   布局原子
   ============================================================ */
.b-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--s-4);                                    /* 默认 16px */
}
@media (max-width: 479px) { .b-container { padding: 0 var(--s-3); } }   /* 极窄屏 12px */
@media (min-width: 768px) { .b-container { padding: 0 var(--s-6); } }   /* 平板 24px */

main.b-main {
	flex: 1;
	min-width: 0;
}

/* ============================================================
   Section 通用
   ============================================================ */
/* 纵向 longhand（不用 padding 简写）：当 .b-container 与 .b-section 在同一元素上时
   （page.php / 商店 / 账户 / 问答 / 排行榜 等），简写会把 .b-container 的左右 gutter 清零
   → 移动端整页贴边。longhand 只设上下，水平 gutter 始终由 .b-container 提供（一改全好，
   原来 woocommerce-account / dokan-dashboard 的 per-page 水平补丁已可删）。 */
/* 批45（2026-06-14 用户:全部一起收紧、以社区页参数为准）:全站 section 纵向节奏统一对齐社区页那档
   —— 段间 16px(--s-4) 全视口;原桌面 48/平板 32/手机 24 留白过大,用户红线收紧。
   跑马灯→大家在看等「区块间过大间距」随本项一并收(无需逐处单独规则)。
   ≤479 再降一档到 12px,与社区移动端密度一致。 */
.b-section { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.b-section--tight { padding-top: var(--s-3); padding-bottom: var(--s-3); }
/* 续19: 全站移动端「极限紧凑」——段落上下内距收到 8px（段间≈16px），覆盖到 ≤768（含大屏手机/平板）。 */
@media (max-width: 768px) {
	.b-section { padding-top: var(--s-2); padding-bottom: var(--s-2); }
	.b-section--tight { padding-top: var(--s-1); padding-bottom: var(--s-1); }
}

.b-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-3);   /* 批45:段头 24→12 对齐社区页 */
	flex-wrap: wrap;
}
@media (max-width: 768px) { .b-section__head { margin-bottom: var(--s-2); } }   /* 续19:移动段头 →8、扩到 ≤768 */
.b-section__title {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	color: var(--ink-0);
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
}
.b-section__title-accent {
	display: inline-block;
	width: 6px; height: 22px;
	background: linear-gradient(180deg, var(--brand) 0%, var(--accent) 100%);
	border-radius: var(--r-pill);
	transform: translateY(3px);
}
/* 〔批X460 站长拍板〕板块大标题本身可点（点进该板块的「全部」页，与右侧「查看全部」同一去处）。
   color:inherit 压住全局 a{color:var(--brand)}——否则标题整片变品牌紫；hover 才染品牌色作为可点提示。
   只作用于标题文字本身：左侧竖色条 accent 与副标题不在链接里（防大热区误触·移动端同理）。 */
/* 〔批X461〕同一规则并组给侧栏卡与卖家后台面板复用（各自 BEM 类名·行为一致）。
   两处的块级 CSS 在 front-page.css / dokan-dashboard.css，但两页都依赖 base.css → 此处并组即全覆盖。 */
.b-section__title-link,
.b-side-card__title-link,
.b-dokan-panel__title-link {
	color: inherit;
	text-decoration: none;
}
.b-section__title-link:hover,
.b-side-card__title-link:hover,
.b-dokan-panel__title-link:hover { color: var(--brand); }
.b-section__subtitle {
	margin: var(--s-2) 0 0;
	font-size: 14px;
	color: var(--ink-3);
	font-weight: 400;
}
.b-section__more {
	font-size: 14px;
	color: var(--ink-3);
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	white-space: nowrap;
}
.b-section__more:hover { color: var(--brand); }
.b-section__more::after { content: "›"; font-size: 18px; line-height: 1; transform: translateY(-1px); transition: transform var(--dur-1) var(--ease); }
.b-section__more:hover::after { transform: translate(2px, -1px); }

/* 主要内容跳到锚点时的让出 (因 sticky header) */
:target { scroll-margin-top: calc(var(--header-h) + 16px); }

/* 〔续26〕全站矢量图标 .b-ic（bumian_theme_icon_svg 输出）—— 取代旧 emoji「经典图标」。
   尺寸随父级 font-size（width/height:1em，覆盖 SVG 上的 width/height 属性）= 原 emoji 怎么大它就怎么大，零逐处改尺寸；
   颜色取父级 currentColor、明暗自动翻。inline 基线对齐与表情接近。 */
.b-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }