/* ========================================================================== Vimora · 商店域装修样式（Shop Domain Styles） -------------------------------------------------------------------------- 覆盖范围：/shop/、商品分类页（product-category）、商品详情页（product） 归属：Accio 【修改约定】——后期维护只看这里 · 商店域样式一律改本文件。 · 不要改 Astra 额外 CSS（存在数据库里，本地改了线上不会同步）。 · 不要改 Codex 的 vimora-site.css（那份管全站色板、首页与内容页）。 · 唯一编辑源：vimora-site-project/src/mu-plugins/，改完同步到本地站与线上。 版本：v2.0 · 2026-09-11 v1.1 间距确定化 · v1.2 产品区背景色统一 · v1.3 分类页头部区 v1.4 头部区 banner 图 · v1.5 产品卡片紧凑化 · v1.6 商品分页配色 v1.7 产品展示顺序（在 .php 里）· v1.8 手机端卡片文字缩小 + banner 压矮 + 顶部间距收紧 ========================================================================== */ /* ========================================================================== 1. 页头留白收紧 -------------------------------------------------------------------------- 问题：页头底部到商品网格顶部之间有 384.95px 空白（占 900px 首屏约 43%） 成因：Astra 默认两条规则叠加 #primary margin-top: 4em = 64px .ast-woocommerce-container padding-top: 5.34em = 85.44px 处理：两条各收到 20px 影响：所有 WooCommerce 页面（含 /shop/，该页有 Hero 横幅，改后需一并复查） ========================================================================== */ .woocommerce-page #primary, .woocommerce #primary { margin-top: 20px !important; } .woocommerce-page .ast-woocommerce-container, .woocommerce .ast-woocommerce-container { padding-top: 20px !important; } /* ========================================================================== 2. 归档页大标题 -------------------------------------------------------------------------- 问题：字号 48px（3rem），而规则是 margin-bottom: 1em → 1em 随字号放大成 48px，标题下方空一大片（标题上空 14.72px vs 下空 48px） 处理：字号收到 32px、下间距改固定 12px（不再随字号浮动） 颜色：Astra 全局色板 1 号色仍是默认蓝紫 #4d61d6，此处临时覆盖为品牌墨色。 待全站色板统一后（vimora-site.css 归属），本行可删除。 ========================================================================== */ .woocommerce-page .woocommerce-products-header__title.page-title, .woocommerce-page .page-title { font-size: 32px !important; line-height: 1.25 !important; margin-bottom: 12px !important; color: #23281f !important; } /* ========================================================================== 3. 面包屑 -------------------------------------------------------------------------- 默认 margin-bottom: 1em = 14.72px，压缩到 10px；字号统一 13px ========================================================================== */ .woocommerce-page nav.woocommerce-breadcrumb { margin-bottom: 10px !important; font-size: 13px !important; } /* ========================================================================== 4. 结果计数 + 排序控件行 -------------------------------------------------------------------------- 问题：.woocommerce-ordering 默认 margin-bottom: 2.5em = 40px p.woocommerce-result-count 上下各 16px → v1.0 只压了这两条，实测该段仍为 42px：排序控件比计数文字行更高， 行高把间距反向撑住，压边距无效。 处理：把计数行与排序控件的上下外边距全部归零，间距改由商品网格 margin-top 单点控制 → 得到确定值 18px，不再受两元素高度差影响。 ========================================================================== */ .woocommerce-page p.woocommerce-result-count, .woocommerce-page form.woocommerce-ordering { margin-top: 0 !important; margin-bottom: 0 !important; } .woocommerce-page ul.products { margin-top: 18px !important; } /* ========================================================================== 5. 产品区背景色统一（v1.2） -------------------------------------------------------------------------- 问题：产品区同时跑着 4 种米白 + 纯白，界面底色不统一： #f5f4f0（页面画布）· #f4f2ee（详情页缩略图） · #f6f2eb（内容页面板）· #f7f4ef（品牌令牌 --vimora-cream） 统一规则（两级表面）： 页面画布 = 米白，统一引用品牌令牌 --vimora-cream 卡片与图片框 = 纯白 #ffffff 维护：想微调米白色调，只改下面 --vimora-canvas 一行，产品区同步生效。 注意：内容页的 #f6f2eb 不属于本文件范围，归 vimora-site.css。 ========================================================================== */ :root { --vimora-canvas: var(--vimora-cream, #f7f4ef); } body.woocommerce-page, body.woocommerce, body.single-product { background-color: var(--vimora-canvas) !important; } /* 卡片与图片框：统一为「米白」——与产品图底色、页面底色三者同色 -------------------------------------------------------------------------- 2026-09-11 由纯白改为 var(--vimora-canvas)（= #f7f4ef）： 用户定稿「产品图整体米白效果更好」。66 张产品主图的底色也已烧进图片本身， 所以图片框必须同色，否则米白图配白框会重新出现「色块没铺满」的问题。 注意：图片本身是「烧色」的，改这里的色值必须与 _bgfix_apply.py 的 TARGET 同步。 */ .woocommerce-page ul.products li.product, .woocommerce-page ul.products li.product img, .woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail, body.single-product ol.flex-control-thumbs li, body.single-product ol.flex-control-thumbs li.vimora-more-thumbs { background-color: var(--vimora-canvas) !important; } /* ========================================================================== 6. 分类页头部区（v1.4） -------------------------------------------------------------------------- 结构：分类页

下方 → .vimora-cat-intro（分类说明文字） → .vimora-cat-materials（材质切换条） 两种外观，由 vimora-shop.php 的第三张表决定： · 纯文字版：没配图的分类，头部区就是普通文字（下面 .vimora-cat-intro 起）。 · 场景图卡片版：配了图的分类，body 会多一个 .vimora-has-cat-banner， 整个头部区（h1 + 说明 + 切换条）变成一张场景图卡片，文字压在左侧 —— 对齐画册引导页的排版：图左半留白给文字，右半是器械场景。 banner 图地址由 PHP 用 wp_add_inline_style 以 CSS 变量 --vimora-cat-banner 注入；本文件负责裁切、白色蒙版与版式，所以加图不用改这里。 竖距衔接（纯文字版）：标题已有 margin-bottom 12px（见 2 节）； 说明段落自身不带上边距，避免与标题叠加； 切换条下边距 16px，与 4 节 ul.products 的 18px 相邻， 外边距合并后取较大值 18px。 ========================================================================== */ .vimora-cat-intro { max-width: 640px; margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: #5f665c; } .vimora-cat-materials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .woocommerce-page .vimora-cat-materials a { display: inline-flex; align-items: center; padding: 7px 16px; /* 白罩去掉后，白色按钮直接压在浅色照片上，靠更深的描边 + 极淡投影兜住存在感 （2026-09-11：原来 #ddd8cd 的描边在浅色照片上对比仅约 1.2:1，几乎看不见） */ border: 1px solid rgba(35, 40, 31, 0.42) !important; border-radius: 999px; background-color: #ffffff !important; color: #23281f !important; font-size: 13px; line-height: 1.2; text-decoration: none; box-shadow: 0 1px 3px rgba(35, 40, 31, 0.16); transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; } /* ⚠ hover / 选中态的声明必须带 !important —— 上面基础按钮规则为了压住照片背景加了 !important， 这里若不加，!important 的基础规则会把选中态压掉，5 个按钮会变成一模一样。 */ .woocommerce-page .vimora-cat-materials a:hover, .woocommerce-page .vimora-cat-materials a:focus-visible { border-color: #23281f !important; background-color: #ffffff !important; color: #23281f !important; } .woocommerce-page .vimora-cat-materials a.is-current { border-color: #23281f !important; background-color: #23281f !important; color: #ffffff !important; box-shadow: none; } .woocommerce-page .vimora-cat-materials a.is-current { border-color: #23281f; background-color: #23281f; color: #ffffff; } /* ---- 场景图卡片版：整个头部区变成一张 banner 图，文字压左侧 ---- */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header { display: flex; flex-direction: column; justify-content: center; min-height: 380px; padding: 46px 44px; border-radius: 10px; overflow: hidden; background-color: #f3ede4; /* 图没加载出来时的兜底色 */ background-repeat: no-repeat; background-size: cover; background-position: left center; /* 亮图：**完全不加白罩**（用户 2026-09-11 明确「那层白罩你甚至都可以不要」）。 ⚠ 配比原则：**图是主角，文字是配角** —— B 端买家本来就熟悉器械， 图片承担视觉冲击与使用场景的说服力，不该为了文字可读性去糊白照片。 敢彻底去掉的依据：这批原图的左侧本来就是浅色墙面 （脚本 _measure_banner_brightness.py 实测文字区亮度 207~230）， 深色字（#23281f）压上去对比度本就有约 11:1，白罩纯属多余。 可读性改由「文字自带的白色光晕」兜底（见下面 text-shadow）—— 光晕只作用在文字笔画周围，不碰照片其余部分。 偏暗的 5 张图另走 vimora-banner-dark 分支（白字 + 深色蒙版）。 */ background-image: var(--vimora-cat-banner, none); } /* 深色文字的光晕：图上局部有暗块时靠它兜住可读性 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .woocommerce-products-header__title, .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro, .woocommerce-page.vimora-has-cat-banner .vimora-cat-materials a { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.85); } /* 说明文字降一级：字号略小、颜色略淡，不与标题抢视觉重心 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro { font-size: 14px; } /* 文字只占左侧，右半留给画面里的器械场景 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .woocommerce-products-header__title, .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro { max-width: 56%; } .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-materials { max-width: 62%; } /* flex 容器里子元素外边距不合并，去掉最后一个的下边距才能真垂直居中 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > :last-child { margin-bottom: 0; } @media (max-width: 900px) { /* banner 整体压矮（用户 2026-09-11 确认「铺开后面积整体缩小、内部更紧凑」） 改前实测：高 326.7px（上下内边距各 30px），目标约 200px。 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header { /* 方案 A：说明段压成 2 行后内容约 110px，盒子收到 150px 正好饱满 （200px 时留白会占约 45%，显得空） */ min-height: 150px; padding: 16px; border-radius: 8px; background-position: left center; /* 手机端同样不加白罩（与桌面一致） */ background-image: var(--vimora-cat-banner, none); } /* 手机端·暗图：同样翻白字、用极淡深色蒙版 */ .vimora-banner-dark.woocommerce-page.vimora-has-cat-banner .woocommerce-products-header { background-image: linear-gradient(180deg, rgba(16, 21, 18, 0.66) 0%, rgba(16, 21, 18, 0.46) 58%, rgba(16, 21, 18, 0.10) 100%), var(--vimora-cat-banner, none) !important; } /* 手机端文字区不再限宽，占满整行 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .woocommerce-products-header__title, .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro, .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-materials { max-width: 100%; } /* 内部三段：字号与间距一起收紧 */ .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .woocommerce-products-header__title { font-size: 24px !important; margin-bottom: 5px !important; } .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 8px !important; } /* 切换条缩小，让 Reformer 那 5 个材质尽量排成一行，省下一行高度 */ .woocommerce-page.vimora-has-cat-banner .vimora-cat-materials { gap: 5px !important; margin-bottom: 0 !important; } .woocommerce-page.vimora-has-cat-banner .vimora-cat-materials a { padding: 5px 10px !important; font-size: 11px !important; } } /* -------------------------------------------------------------------------- 文字区偏暗的 banner 图 → 改成「白字 + 极淡深色蒙版」 --------------------------------------------------------------------------- 实测（脚本 _measure_banner_brightness.py，量文字区 0~58% 宽 / 20~80% 高）： megaformer 57.6 ｜ spine-corrector 138.2 ｜ wall-unit 158.7 bidirectional-ladder-bed 165.2 ｜ reformer-fold 180.3 这 5 张上压深色字根本看不清（megaformer 曾被误判成「文字被截断」）。 处理思路（用户 2026-09-11 明确「图为主、字为辅」后改定）： 不再糊一层厚白罩 —— 夜景/暗调照片糊白会彻底毁掉氛围，那正是不该做的事。 改成深色字翻白字 + 极淡深色蒙版：既保住照片的暗调质感，对比度还更高。 选择器用复合写法（.vimora-banner-dark.woocommerce-page.vimora-has-cat-banner）： 两个类都挂在 上，中间不能用空格，否则变成「后代」匹配不到。 类名由 vimora-shop.php 的 body_class 过滤器加上。 -------------------------------------------------------------------------- */ .vimora-banner-dark.woocommerce-page.vimora-has-cat-banner .woocommerce-products-header { background-image: linear-gradient(95deg, rgba(16, 21, 18, 0.62) 0%, rgba(16, 21, 18, 0.44) 30%, rgba(16, 21, 18, 0.14) 56%, rgba(16, 21, 18, 0) 72%), var(--vimora-cat-banner, none) !important; } /* 暗图上的标题与说明翻成白色，并改用深色光晕 */ .vimora-banner-dark.woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .woocommerce-products-header__title, .vimora-banner-dark.woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.45) !important; } /* 暗图上的材质切换条：改成半透明白，避免白色实心块太扎眼 */ .vimora-banner-dark.woocommerce-page .vimora-cat-materials a { border-color: rgba(255, 255, 255, 0.55) !important; background-color: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } .vimora-banner-dark.woocommerce-page .vimora-cat-materials a:hover, .vimora-banner-dark.woocommerce-page .vimora-cat-materials a:focus { border-color: #ffffff !important; background-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; } /* 当前材质：白底墨字，在暗图上做最强对比 */ .vimora-banner-dark.woocommerce-page .vimora-cat-materials a.is-current { border-color: #ffffff !important; background-color: #ffffff !important; color: #23281f !important; } /* ========================================================================== 手机端：说明段压成 2 行 + 底部渐隐 —— 方案 A（用户 2026-09-11 选定，全站生效） -------------------------------------------------------------------------- 背景：手机端 banner 里「标题 + 4 行说明 + 5 个切换按钮」字数太多。 先试了「直接隐藏说明段」，实测**留白占到 60%、显得没做完**，方案作废。 用户改选方案 A：**保留说明，但只显示 2 行 + 底部渐隐**。 为什么用「压行 + 渐隐」而不是 display:none： · 隐藏会让留白占比更大，版面反而更空（实测：藏掉后内容仅 60px、留白 90px）； · display:none 的内容在「移动优先索引」下通常不计入正文，而分类页的 说明文字是主要原创内容 —— 压行方案文字仍在文档流里，不受影响； · 渐隐比省略号自然，不会像话没说完。 配套：手机端 banner 高度由 200px 收到 150px（内容约 110px + 上下内边距 32px）。 ========================================================================== */ @media (max-width: 599px) { .woocommerce-page.vimora-has-cat-banner .woocommerce-products-header > .vimora-cat-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0.28) 100%); mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0.28) 100%); } } /* -------------------------------------------------------------------------- 收紧「顶部 logo → banner」之间的空白（仅手机端、仅带 banner 的分类页） 用户 2026-09-11 确认：间距压到约 45px。 改前实测 131.7px，拆开是： 78.4px 内容区上方空白 + 20px 容器上内边距 + 23.3px 面包屑 + 10px 面包屑下边距 面包屑是导航必须保留；把前两块压掉，再给容器留 12px： 0 + 12 + 23.3 + 10 = 45.3px 只作用于带 banner 的分类页（body.vimora-has-cat-banner），不碰 /shop/。 -------------------------------------------------------------------------- */ @media (max-width: 900px) { body.vimora-has-cat-banner .site-content { padding-top: 0 !important; } body.vimora-has-cat-banner #primary { margin-top: 0 !important; padding-top: 0 !important; } body.vimora-has-cat-banner .ast-container { padding-top: 0 !important; } body.vimora-has-cat-banner .ast-woocommerce-container { padding-top: 12px !important; } body.vimora-has-cat-banner .woocommerce-breadcrumb { margin-top: 0 !important; margin-bottom: 10px !important; } } /* ========================================================================== 7. 产品卡片紧凑化（v1.5） -------------------------------------------------------------------------- 问题（2026-09-10 在 1440px 视口实测）： · 卡片 363.5 × 392px，一屏只放得下约 2 行 · 商品图占卡片高 61%，但原图留白多，整张卡片又大又空 · 栅格间距 row-gap 40px / column-gap 28px，偏松 · 分类小标签字号 13.6px，和标题一样大，层级没拉开 · 手机端仍固定 3 列：390px 屏上每张卡片只有 91px 宽，标题被截断 用户反馈：卡片"傻大、版面乱、没有高级感"，国外客户不喜欢； 高级感的排版图片和字体都偏小。 处理：桌面 3 列 → 4 列（卡片自适应缩到约 264px），收紧栅格间距与 文字区留白，拉开标签/标题的字号层级，并补上手机端列数。 注意：本节的列数与间距同时作用于 /shop/ 与商品分类页（同属商店域）。 /shop/ 在手机端的列数由 Codex 的规则优先接管，不受本节影响。 ========================================================================== */ /* -------------------------------------------------------------------------- 栅格列数：桌面 4 列（原 3 列），并收紧列间距 背景：Astra 额外 CSS（数据库里的字段，不在本仓库）原本堆了 5 轮带 !important 的 ul.products 栅格规则，把列数钉死在 3 列；它自带的手机断点权重只有 0-1-1， 又被它自己的基础规则压掉 —— 这就是手机端一直 3 列、卡片仅 91px 宽的原因。 那 14 行冲突声明已于 2026-09-11 从数据库清理掉（备份见 wp-content 下的 _custom_css_backup_*.css），所以本节恢复成普通选择器。 -------------------------------------------------------------------------- */ .woocommerce-page ul.products, .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 26px 18px !important; } @media (max-width: 1199px) { .woocommerce-page ul.products, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 899px) { .woocommerce-page ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 14px !important; } } @media (max-width: 599px) { .woocommerce-page ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; } } /* 卡片文字区：内边距收紧（原 14px 18px 18px 18px） */ .woocommerce-page ul.products li.product .astra-shop-summary-wrap, .woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 12px 14px 14px !important; } /* 分类小标签：字号降一级，拉开与标题的层级（原 13.6px，与标题同大） */ .woocommerce-page ul.products li.product .ast-woo-product-category, .woocommerce ul.products li.product .ast-woo-product-category { font-size: 11px !important; letter-spacing: 0.08em !important; margin-bottom: 5px !important; } /* 标题：略缩一号 + 固定两行高度，保证同排卡片等高（原 13.6px / min-height 39.44px） */ .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; min-height: 2.7em !important; margin-bottom: 8px !important; } /* -------------------------------------------------------------------------- 手机端（≤599px）：卡片三段文字同步缩小 用户 2026-09-11 确认：每行保持 2 个；材质 / 名称 / View Details 一起缩； 名称仍固定 2 行，放不下的用省略号（不放宽到 3 行）。 手机端卡片宽约 159px，实测 12 张卡有 6 张标题被截断，被吃掉的正好是 (Oak) / (Maple) 后缀 —— 但卡片上方已单独显示材质标签，属重复信息，截掉无损失。 min-height 不用重写：上一段用的是 em，字号一改，2.7em 自动跟着变小。 -------------------------------------------------------------------------- */ @media (max-width: 599px) { .woocommerce-page ul.products li.product .ast-woo-product-category, .woocommerce ul.products li.product .ast-woo-product-category { font-size: 10px !important; margin-bottom: 4px !important; } .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 11.5px !important; margin-bottom: 6px !important; } /* View Details：只缩字号与内边距（用户确认不改文字），宽度约 −17% */ .woocommerce-page ul.products li.product .button, .woocommerce ul.products li.product .button { font-size: 9px !important; padding: 5px 8px !important; } .woocommerce-page ul.products li.product .astra-shop-summary-wrap, .woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 10px 12px 12px !important; } } /* ========================================================================== 8. 商品分页配色（v1.6） -------------------------------------------------------------------------- 问题：WooCommerce 分页按钮默认跟随 Astra 全局色 --ast-global-color-1 （站点上是默认蓝紫 #4d61d6），当前页是蓝底白字，和本站暖色调完全不搭。 处理：改成与商品卡片同一套配色 —— 白底 + 暖灰描边 + 墨色文字， 当前页墨色实心。保持靠左对齐（与商品网格左边缘对齐）。 DOM：nav.woocommerce-pagination > ul.page-numbers > li > span.page-numbers.current（当前页） > a.page-numbers（其它页） > a.next / a.prev（上/下页，内容是 → / ← 纯文字箭头） ========================================================================== */ .woocommerce-page nav.woocommerce-pagination ul.page-numbers, .woocommerce nav.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 26px 0 0; padding: 0; border: 0 !important; } .woocommerce-page nav.woocommerce-pagination ul.page-numbers li, .woocommerce nav.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0 !important; background: none !important; } .woocommerce-page nav.woocommerce-pagination ul.page-numbers li > a, .woocommerce-page nav.woocommerce-pagination ul.page-numbers li > span, .woocommerce nav.woocommerce-pagination ul.page-numbers li > a, .woocommerce nav.woocommerce-pagination ul.page-numbers li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid #ddd8cd !important; border-radius: 6px; background-color: #ffffff !important; color: #23281f !important; font-size: 13px; line-height: 1; text-decoration: none; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; } .woocommerce-page nav.woocommerce-pagination ul.page-numbers li > a:hover, .woocommerce-page nav.woocommerce-pagination ul.page-numbers li > a:focus, .woocommerce nav.woocommerce-pagination ul.page-numbers li > a:hover, .woocommerce nav.woocommerce-pagination ul.page-numbers li > a:focus { border-color: #23281f !important; background-color: #ffffff !important; color: #23281f !important; } .woocommerce-page nav.woocommerce-pagination ul.page-numbers li > span.current, .woocommerce nav.woocommerce-pagination ul.page-numbers li > span.current { border-color: #23281f !important; background-color: #23281f !important; color: #ffffff !important; } /* ========================================================================== 9. /shop/ 顶部「Browse by Series」分类磁贴：改为不裁切（2026-09-11 用户选定） -------------------------------------------------------------------------- 问题：这 10 个磁贴的样式是**内联写在 /shop/ 页面内容里**的（