/* ==========================================================================
   shop-bridge.css —— 官网 ↔ 商城（smartshop）打通相关样式  v1.11.0
   为什么单独一个文件：官网的 style.css 在服务器上有手工调整过，整包覆盖会丢，
   所以打通功能用到的样式全部放这里，header.ejs 加一行 <link> 即可。

   排查提示：改了这里没反应，先看 header.ejs 的 link 是否带上版本号参数
   （?v=<%= version %>），浏览器强刷一次再试。
   ========================================================================== */

/* ---- 详情页：去商城购买（主按钮，橙色跟商城主色一致） ---- */
.btn-shop {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
}
.btn-shop:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35);
}

/* ---- 详情页：数据与商城实时同步的说明文字 ---- */
.product-shop-sync {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #94a3b8;
}
.product-shop-sync i { color: #ea580c; }

/* ---- 产品卡片上的迷你商城入口（首页 / 列表页 / 品牌页 / 相关产品） ---- */
.product-shop-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #ea580c;
  transition: background 0.2s, color 0.2s;
}
.product-shop-mini:hover { background: #ffedd5; color: #c2410c; }

/* 手机端：卡片更窄，入口按钮缩一点，避免撑破网格 */
@media (max-width: 640px) {
  .product-shop-mini { padding: 3px 8px; font-size: 11.5px; }
  .product-shop-sync { font-size: 12px; }
}