/* ============================================================================
   企采通 采购商端 —— 手写的少量站点样式（非 Tailwind 生成产物）

   为什么需要这个文件：站点的 tailwind.css 是**预编译**的静态文件，没有运行时 JIT，
   只有构建时扫描到的类才在里面。跨页面复用的小效果如果依赖某个 Tailwind 变体类
   （hover: / group-hover: 之类），一旦那个类没被编进去，写了就**完全没效果**、也不报错 ——
   本仓库已经踩过好几次（页脚那条 border-slate-800 变白线就是这么来的）。
   首页/招商/网站地图是例外：它们额外引了运行时 JIT 的 tailwindcss.js，那些页面上任意类都有效。

   所以：要跨页面复用的效果写在这里，别去赌预编译的类在不在。
   ============================================================================ */

/* 商品列表卡：鼠标悬停时商品图缓缓放大（图片外框负责裁切，所以图区必须有 overflow:hidden）。
   用于采购大厅、首页精选、店铺商品、我的收藏、详情页热门推荐这些商品卡。 */
.qct-zoom img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.qct-zoom:hover img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .qct-zoom img { transition: none; } }

/* 首页左侧分类：鼠标停留的那个一级分类整块高亮（浅蓝底 + 标题变蓝）。
   放在这里而不是在 JS 里 toggle Tailwind 的 bg/text 类：同一个工具组里的两个颜色类同时存在时，
   谁生效由生成样式表的顺序决定（slate 排在 blue 之后会把 blue 盖掉），写在这里才是确定的。 */
.mega-item.mega-on { background: #fef2f2; }
.mega-item.mega-on .mega-title { color: #dc2626; }

/* 头部 / 面包屑 / 页脚与 <main> 内容对齐的规则**不在这个文件里**，而是写死在 _Layout.cshtml
   那几行的行内 style 上：容器宽 = 1280 内容 + 32×2 内边距 = 1344，再补 main 的滚动条宽度
   （--qct-sbw，由 _Layout 里的脚本量出来挂到 <html>）。
   为什么不用类：这一层是页面骨架，site.css 一旦没部署上、或这个文件里有语法错误被浏览器丢掉，
   头部就会整条贴到屏幕边上。行内 style 跟着 HTML 走，不依赖外部文件。
   ★ 各页面的内容容器统一用 max-w-[1280px] mx-auto（原来 1000~1440 五花八门，一个头部没法同时
     对齐好几档宽度）。新增页面请照这个宽度写。
   ⚠ 这个文件的注释必须成对闭合 —— 上面那次就是漏了个 "* /" 导致后面的规则被整条丢掉。 */

/* 首页左侧分类：一级下面的二级列表**最多显示 3 行**，多出来的裁掉（完整清单在右侧浮层里看）。
   行高/行距写死在这里，3 行的高度才是确定的：行高 18px × 3 + 行距 2px × 2 = 58px。
   不用 -webkit-line-clamp：那个对 flex 换行容器不生效（它是给一段文本用的），
   这里用 max-height + overflow:hidden 更直接，代价是第 3 行以下被硬裁。 */
.mega-sub { display: flex; flex-wrap: wrap; column-gap: .75rem; row-gap: 2px; max-height: 58px; overflow: hidden; }
.mega-sub a { line-height: 18px; }

/* 买家端登录后的公共页头：白色背景使用深色文字和浅色分隔线。 */
.qct-buyer-header .text-slate-300,
.qct-buyer-header .text-slate-400 { color: #64748b; }
.qct-buyer-header a.text-slate-300:hover,
.qct-buyer-header button.text-slate-300:hover { color: #2563eb; }
.qct-buyer-header .border-slate-700 { border-color: #e2e8f0; }
.qct-buyer-header .bg-slate-700 { background-color: #e2e8f0; }

/* 首页窄桌面/平板：三栏在 1200px 以下会把中间主视觉挤得过窄。
   此时隐藏左侧重复分类和主视觉内的快捷分类，保留核心操作与右侧工作台。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .qct-home-hero { grid-template-columns: minmax(0, 1fr) 240px !important; }
  .qct-home-categories { display: none !important; }
  .qct-home-promo { padding: 32px !important; }
  .qct-home-promo h1 { font-size: 32px !important; }
}