/* ===========================================================
   产品图片列表栅格美化 v2  2026-11-11
   需求：一排5个产品、每页50个、卡片美化、货号可鼠标选中复制
   方案：CSS Grid 5列等宽栅格 + 卡片式视觉（白卡/圆角/阴影/hover）
         新增 .ynd-skurow 货号行（文本可选中 + 一键复制按钮）
   2026-11-11b：主图显示尺寸调大到 266px（列表容器加宽至1500px）
   2026-11-11c：主图固定 266px 定宽显示（对齐 ceshi 站原版尺寸），
         图片铺满卡片顶部全出血，文字区另加内边距
   =========================================================== */
.gmian ul{
  display:grid !important;
  grid-template-columns:repeat(5,266px);
  justify-content:space-between;
  row-gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}
.gmian ul li{
  width:auto !important;
  min-width:0;
  float:none !important;
  margin:0 !important;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:10px;
  padding:0 0 10px;
  box-sizing:border-box;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(30,60,100,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gmian ul li:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(50,135,207,.16);
  border-color:#b9d4ee;
}
.gmian ul li a{
  display:flex !important;
  flex-direction:column;
  flex:1 1 auto;
  text-decoration:none;
  padding:0;
}
.gmian ul li img{
  width:266px;
  max-width:none;
  height:266px;
  margin:0 auto;
  object-fit:contain;
  background:#fff;
  display:block;
}
.gmian ul li p{
  width:auto;
  padding:0 12px;
  font-size:15px;
  line-height:1.5;
  margin:10px 12px 6px;
  height:3em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  text-align:left;
  color:#2b3440;
  font-weight:600;
}
.gmian ul li p:hover{ color:#3287cf; }
.gmian ul li span{
  display:block;
  width:auto;
  padding:0 12px;
  box-sizing:border-box;
  font-size:12px;
  color:#8a97a5;
  line-height:1.6;
}
.gmian ul li span:empty{ display:none; }
.gmian ul li span + span{ margin-top:0; }

/* ---------- 货号行：可选中复制 + 一键复制按钮 ---------- */
.ynd-skurow{
  display:flex;
  align-items:center;
  gap:6px;
  margin:6px 12px 0;
  padding:5px 6px 5px 10px;
  background:#f2f7fc;
  border:1px solid #dfeaf4;
  border-radius:6px;
}
.ynd-skurow .ynd-sku{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  line-height:1.5;
  color:#3287cf;
  font-weight:600;
  font-family:Consolas,Menlo,monospace;
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-user-select:text;
  user-select:text;
  cursor:text;
}
.ynd-skurow .ynd-copy{
  flex:0 0 auto;
  border:0;
  outline:0;
  background:#3287cf;
  color:#fff;
  font-size:12px;
  line-height:1;
  padding:6px 10px;
  border-radius:5px;
  cursor:pointer;
  transition:background .15s;
}
.ynd-skurow .ynd-copy:hover{ background:#1f6fb2; }
.ynd-skurow .ynd-copy.ok{ background:#2ea44f; }

/* ---------- 标题：允许换行 + 两行截断 ---------- */
.gmian ul.c li p{
  white-space:normal !important;
  word-break:break-word;
}

/* ---------- 响应式 ---------- */
/* 中等屏：四列（固定266px列宽，与桌面端一致） */
@media screen and (max-width:1180px){
  .gmian ul{ grid-template-columns:repeat(4,266px); justify-content:space-between; }
}
/* 小屏：三列 */
@media screen and (max-width:992px){
  .gmian ul{ grid-template-columns:repeat(3,266px); justify-content:space-between; }
}
/* 移动端：两列，图片恢复自适应铺满 */
@media screen and (max-width:768px){
  .gmian ul{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .gmian ul li img{ width:100%; height:auto; aspect-ratio:1/1; }
  .gmian ul li p{ font-size:14px; line-height:1.45; height:2.9em; margin:8px 0 4px; padding:0 8px; }
  .gmian ul li a{ padding:0; }
  .gmian ul li span{ padding:0 8px; }
  .ynd-skurow{ margin:4px 8px 0; }
  .ynd-skurow .ynd-sku{ font-size:12px; }
}