Shopify stylesheet_tag 顺序放错样式被覆盖

现象#

自定义样式写进 custom.css 并在 theme.liquid 引入，前台按钮颜色仍是主题默认值；DevTools 里 custom.css 排在 base.css 前面。

原因#

• CSS 按引入顺序层叠，后加载的同权重规则才会覆盖前面的
• stylesheet_tag 输出的 link 紧跟调用位置，放错位置等于改了优先级
• link 上带了 media 为 print 的属性，屏幕下这条样式表根本不参与渲染
• 关键样式被主题内联在 head 里，外部文件同权重时压不过内联规则

处理步骤#

1. 在 layout/theme.liquid 中把自定义样式放在主题基础样式之后
2. 用 {{ 'custom.css' | asset_url | stylesheet_tag }} 输出，不要手写 link
3. 检查 link 是否带 media="print"，有则删掉该属性
4. 需要更高优先级时提高选择器权重，例如加一层父类，而不是堆 important
5. 刷新后在 DevTools 的 Computed 面板确认命中规则来自 custom.css

验收标准#

按钮颜色与设计稿一致，样式面板中被划掉的规则来自基础样式；移动端与桌面端表现一致。