/* =========================================================
   1F-10F 大类楼层 · 主流电商样式重构
   说明：数据 / Repeater 字段 / 左广告 / 下广告内容全部不变，
        仅重做布局与样式特效；不改动网站宽度。
   ========================================================= */

/* ---------- 楼层整体 ---------- */
.sy_mod_f{ margin-bottom:26px; position:relative; }
/* 负 margin 楼层延伸到视口外的部分裁剪，杜绝横向滚动条（不改网站宽度） */
html,body{ overflow-x:hidden; }

/* ---------- 楼层标题 ---------- */
.sy_mod_f .sy_mod_f_hd{ height:42px; line-height:42px; border-bottom:2px solid #e1251b; margin-bottom:14px; }
.sy_mod_f .sy_mod_f_hd h2{ margin:0; font-size:22px; font-weight:700; color:#e1251b; }
.sy_mod_f .sy_mod_f_hd h2 a{ color:#222; text-decoration:none; margin-left:10px; }
.sy_mod_f .sy_mod_f_hd h2 a:hover{ color:#e1251b; }

/* ---------- 排行榜标题 + 二级分类 tabs ---------- */
.sy_mod_f .sy_mod_rank_hd{ display:flex; align-items:center; min-height:40px; border-bottom:1px solid #f0f0f0; margin-bottom:14px; flex-wrap:wrap; }
.sy_mod_f .sy_mod_rank_tit{ position:relative; padding-left:12px; margin:0 22px 0 0; font-size:16px; font-weight:700; color:#333; }
.sy_mod_f .sy_mod_rank_tit::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:16px; background:#e1251b; border-radius:2px; }
.sy_mod_f .sy_mod_rank_ext{ list-style:none; display:flex; align-items:center; flex-wrap:wrap; margin:0; padding:0; }
.sy_mod_f .sy_mod_rank_ext li{ margin:2px 3px; }
.sy_mod_f .sy_mod_rank_ext li a{ display:inline-block; padding:4px 13px; font-size:13px; color:#666; border-radius:14px; text-decoration:none; transition:color .2s,background .2s; }
.sy_mod_f .sy_mod_rank_ext li a:hover{ color:#e1251b; background:#fff1f0; }
.sy_mod_f .sy_mod_rank_ext li.on a{ color:#fff; background:#e1251b; }
.sy_mod_f .sy_mod_rank_gap{ display:none !important; }
.sy_mod_f .sy_mod_rank_ext li.on{ background-color:transparent !important; padding:0 !important; margin:2px 3px !important; position:static !important; }

/* ---------- 商品区容器：解除原固定高度，完整显示两行卡片 ---------- */
.sy_mod_f .sy_mod_rank{ height:auto !important; min-height:0 !important; overflow:visible !important; width:auto !important; border:0 !important; }
.sy_mod_f .grid_m{ height:auto !important; min-height:0 !important; overflow:visible !important; }

/* ---------- 商品板：4列浮动；显示/隐藏交由切换插件(slider)的 display 控制，勿用 !important 锁死 ---------- */
.sy_mod_f .sy_mod_rank_bd{ list-style:none; margin:0; padding:0 0 8px; width:100% !important;
  height:auto !important; box-sizing:border-box; overflow:visible !important; zoom:1; }
.sy_mod_f .sy_mod_rank_bd::after{ content:""; display:block; clear:both; }
.sy_mod_f .sy_mod_rank_bd.hide{ display:none; }
.sy_mod_f .sy_mod_rank_bd li.goods{
  float:left; width:calc(25% - 21.07px); margin:0 21.07px 10px 0; box-sizing:border-box;
  background:#fff; border:1px solid #ebeef2; border-radius:8px; padding:10px;
  display:flex; flex-direction:column; height:333.1px;
  transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease; }
.sy_mod_f .sy_mod_rank_bd li.goods:hover{
  border-color:#f43939; box-shadow:0 8px 20px rgba(229,37,27,.13); transform:translateY(-3px); }

/* ---------- 商品图片区 ---------- */
.sy_mod_f .pic_wrap{ position:relative; width:100%; aspect-ratio:1/1; height:auto !important; background:#fafbfc;
  border-radius:6px; overflow:hidden; margin:0; flex:0 0 auto; }
.sy_mod_f .pic_wrap a.litpic{ display:flex; align-items:center; justify-content:center; width:100% !important; height:100% !important; }
.sy_mod_f .pic_wrap img{ width:auto !important; height:auto !important; max-width:92%; max-height:92%;
  object-fit:contain; transition:transform .45s ease; }
.sy_mod_f li.goods:hover .pic_wrap img{ transform:scale(1.07); }
.sy_mod_f .pic_wrap .ss_xianshi{ position:absolute; left:0; top:0; z-index:2; }

/* ---------- 商品标题（单行截断，hover 变红） ---------- */
.sy_mod_f .title_wrap{ margin:8px 0 0 !important; padding:0 !important; width:100% !important; text-align:left; align-self:stretch; flex:0 0 auto; box-sizing:border-box; }
.sy_mod_f .title_wrap a{ display:block; height:18px; line-height:18px; font-size:13px; color:#333; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.sy_mod_f .title_wrap a:hover{ color:#e1251b; }

/* ---------- 商品价格 ---------- */
.sy_mod_f .price_wrap{ margin-top:auto; padding:0 !important; display:flex; align-items:center; justify-content:space-between; gap:6px; flex:0 0 auto; }
.sy_mod_f .price_wrap .price{ margin:0; color:#e1251b; font-size:19px; font-weight:700; line-height:1.2;
  white-space:nowrap; overflow:hidden; flex:1 1 auto; min-width:0; }
.sy_mod_f .price_wrap .price > span:first-child{ font-size:13px; }
.sy_mod_f .price_wrap .price .price_unit{ font-size:12px; color:#999; font-weight:400; }

/* ---------- 左侧广告图：圆角细边 ---------- */
.sy_mod_f .sy_mod_glide_img{ list-style:none; margin:0; padding:0; }
.sy_mod_f .sy_mod_glide_img img{ border-radius:8px; border:1px solid #ececec; box-sizing:border-box; }

/* ---------- 左广告 B1（sy_mod_key）：随主广告正常排布，不溢出挡标题 ---------- */
.sy_mod_f .grid_s .sy_mod_glide{ height:auto !important; }
.sy_mod_f .grid_s .sy_mod_glide_img{ height:400px !important; }
.sy_mod_f .grid_s .sy_mod_key{ margin:10px 0 0; }
.sy_mod_f .grid_s .sy_mod_key:empty{ height:0 !important; margin:0; overflow:hidden; }
.sy_mod_f .grid_s .sy_mod_key img{ border-radius:8px; border:1px solid #ececec; box-sizing:border-box; }

/* =========================================================
   左侧：广告下方二级分类名称网格（3 列）
   ========================================================= */
.sy_mod_f .grid_s .subcat_grid{ margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:4px 4px; }
.sy_mod_f .grid_s .subcat_grid a{ display:block; font-size:12px; line-height:16px; color:#555;
  padding:2px 2px; text-align:center; border-radius:4px; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s,background .2s; }
.sy_mod_f .grid_s .subcat_grid a:hover{ color:#e1251b; background:#fff1f0; }

/* =========================================================
   右侧：真实热销排行榜（近一年销量）
   ========================================================= */
.sy_mod_f .grid_e .hotrank{ background:#fff; border:1px solid #ebeef2; border-radius:8px; padding:10px 50px 10px 12px;
  box-sizing:border-box; }
.sy_mod_f .grid_e .hotrank_group.hide{ display:none !important; }
.sy_mod_f .grid_e .hotrank_tit{ position:relative; padding-left:11px; margin:0 0 6px; height:24px;
  line-height:24px; font-size:15px; font-weight:700; color:#333;
  display:flex; align-items:center; justify-content:space-between; }
.sy_mod_f .grid_e .hotrank_tit::before{ content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:4px; height:15px; background:#e1251b; border-radius:2px; }
.sy_mod_f .grid_e .hotrank_item{ display:flex; align-items:center; padding:7px 0;
  border-bottom:1px dashed #f0f0f0; }
.sy_mod_f .grid_e .hotrank_item:last-child{ border-bottom:0; }
.sy_mod_f .grid_e .hotrank_item{ border-radius:6px; transition:box-shadow .2s ease,transform .2s ease; }
.sy_mod_f .grid_e .hotrank_item:hover{ outline:1px solid #f43939; box-shadow:0 4px 12px rgba(229,37,27,.16); transform:translateY(-2px); }
.sy_mod_f .grid_e .hotrank_no{ flex:0 0 20px; width:20px; height:20px; line-height:20px; text-align:center;
  font-size:12px; font-weight:700; color:#fff; background:#b8bdc3; border-radius:4px; margin-right:8px; }
.sy_mod_f .grid_e .hotrank_n1{ background:#e1251b; }
.sy_mod_f .grid_e .hotrank_n2{ background:#e85b0c; }
.sy_mod_f .grid_e .hotrank_n3{ background:#d98c00; }
.sy_mod_f .grid_e .hotrank_n4{ background:#5fa820; }
.sy_mod_f .grid_e .hotrank_n5{ background:#2e9e44; }
.sy_mod_f .grid_e .hotrank_n6{ background:#0e9e9e; }
.sy_mod_f .grid_e .hotrank_n7{ background:#1283c6; }
.sy_mod_f .grid_e .hotrank_n8{ background:#2b5fa8; }
.sy_mod_f .grid_e .hotrank_n9{ background:#5b4bb0; }
.sy_mod_f .grid_e .hotrank_n10{ background:#8a2bb0; }
.sy_mod_f .grid_e .hotrank_pic{ flex:0 0 50px; width:50px; height:50px; margin-right:8px; border-radius:6px;
  background:#fafbfc; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sy_mod_f .grid_e .hotrank_pic img{ max-width:90%; max-height:90%; width:auto; height:auto; object-fit:contain; }
.sy_mod_f .grid_e .hotrank_info{ flex:1 1 auto; min-width:0; }
.sy_mod_f .grid_e .hotrank_name{ display:block; line-height:15px; font-size:12px; color:#444;
  white-space:normal; word-break:break-all; text-decoration:none; }
.sy_mod_f .grid_e .hotrank_name:hover{ color:#e1251b; }
.sy_mod_f .grid_e .hotrank_price{ margin-top:3px; font-size:14px; font-weight:700; color:#e1251b;
  line-height:18px; white-space:nowrap;
  display:flex; justify-content:flex-end; align-items:baseline; }
.sy_mod_f .grid_e .hotrank_price span{ font-size:11px; }
.sy_mod_f .grid_e .hotrank_empty{ padding:14px 4px; font-size:12px; color:#999; text-align:center; }
/* 热销榜单分页（上一页/下一页） */
.sy_mod_f .grid_e .hotrank_tit_txt{ flex:0 0 auto; }
.sy_mod_f .grid_e .hotrank_pager{ flex:0 0 auto; display:flex; align-items:center; gap:3px; }
.sy_mod_f .grid_e .hr_pg{ position:relative; display:block; width:19px; height:19px;
  border:1px solid #f0b8b3; border-radius:4px; background:#fff; box-sizing:border-box; }
.sy_mod_f .grid_e .hr_pg:hover{ background:#fff1f0; border-color:#e1251b; }
.sy_mod_f .grid_e .hr_pg::before{ content:''; position:absolute; top:50%; border:4px solid transparent; }
.sy_mod_f .grid_e .hr_prev::before{ left:6px; transform:translateY(-50%); border-right-color:#e1251b; }
.sy_mod_f .grid_e .hr_next::before{ right:6px; transform:translateY(-50%); border-left-color:#e1251b; }
.sy_mod_f .grid_e .hr_pg.disabled{ opacity:.38; cursor:default; pointer-events:none; }
.sy_mod_f .grid_e .hr_pginfo{ font-size:12px; font-weight:400; color:#666; min-width:30px;
  text-align:center; line-height:1; }

/* =========================================================
   热销榜单：标题位于楼层标题横线下方，与商品首行对齐；
   行高固定，显示条数由 new_index.js 按楼层实际高度控制
   ========================================================= */
.sy_mod_f .grid_e{ margin-top:-5px !important; margin-left:5px !important; }
.sy_mod_f .grid_e .hotrank{ padding-top:10px; padding-bottom:10px; }
.sy_mod_f .grid_e .hotrank_item{ min-height:60px !important; padding-top:0 !important; padding-bottom:0 !important; }
.sy_mod_f .grid_e .hotrank_pic{ flex:0 0 46px !important; width:46px !important; height:46px !important; margin-right:8px; }

/* 锚点/刷新定位时，楼层停在固定顶部导航(.yx_head)下方，避免标题与榜单前几名被遮挡 */
.sy_mod_f{ scroll-margin-top:185px; }

/* =========================================================
   二级分类 tab 行：上移到楼层标题下边框（横线）上方，
   与楼层大标题同行；去掉原 tab 行下灰线
   ========================================================= */
.sy_mod_f .sy_mod_rank_hd{ margin-top:-59px !important; height:auto !important;
  padding:0 0 5px !important; border-bottom:0 !important; background:transparent !important; }

/* =========================================================
   每个楼层商品只显示两行（每行4个），第9个起隐藏；tab 行底部不压横线
   ========================================================= */
.sy_mod_f .sy_mod_rank_hd{ padding-bottom:0 !important; }
.sy_mod_f .sy_mod_rank_bd li.goods:nth-child(n+9){ display:none !important; }

/* =========================================================
   视口足够宽（>=1700，楼层完整居中且不与右侧悬浮栏重叠）时，
   榜单列填满楼层右缘、与楼层头部绿色线条右端对齐，并恢复右侧padding；
   窄/中视口榜单右侧让出悬浮工具栏宽度，价格不被遮挡
   ========================================================= */
@media screen and (min-width:1700px){
  .wrap_1600 .sy_mod_f .grid_e{ width:302px !important; }
  .sy_mod_f .grid_e .hotrank{ padding-right:12px !important; }
}

/* =========================================================
   中间商品展示区分页（上一页/下一页），位于商品区底部靠右
   ========================================================= */
.sy_mod_f .goods_pager{ position:absolute; top:15px; right:41px; z-index:6;
  display:flex; align-items:center; gap:6px; margin:0; padding:0; flex:0 0 auto; }
.sy_mod_f .gp_pg{ position:relative; display:block; width:30px; height:26px;
  border:1px solid #f0b8b3; border-radius:5px; background:#fff; box-sizing:border-box; }
.sy_mod_f .gp_pg:hover{ background:#fff1f0; border-color:#e1251b; }
.sy_mod_f .gp_pg::before{ content:''; position:absolute; top:50%; border:6px solid transparent; }
.sy_mod_f .gp_prev::before{ left:9px; transform:translateY(-50%); border-right-color:#e1251b; }
.sy_mod_f .gp_next::before{ right:9px; transform:translateY(-50%); border-left-color:#e1251b; }
.sy_mod_f .gp_pg.disabled{ opacity:.38; cursor:default; pointer-events:none; }
.sy_mod_f .gp_pginfo{ font-size:13px; color:#666; min-width:42px; text-align:center; line-height:1; }

/* ---------- 加入购物车按钮（价格行右侧） ---------- */
.sy_mod_f .btn_addcart{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; height:26px; padding:0 9px;
  background:#e1251b; color:#fff; font-size:12px; line-height:1; border-radius:14px; text-decoration:none;
  white-space:nowrap; cursor:pointer; box-sizing:border-box; transition:background .2s ease; }
.sy_mod_f .btn_addcart:hover{ background:#c71a13; }
.sy_mod_f .btn_addcart.loading{ opacity:.6; pointer-events:none; }
.sy_mod_f .btn_addcart .ic_cart{ width:14px; height:14px; display:inline-block;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.77-1.03L21.7 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>") center/contain no-repeat; }
#addcart_toast{ position:fixed; left:50%; top:32%; transform:translate(-50%,-50%); background:rgba(0,0,0,.8);
  color:#fff; padding:13px 22px; border-radius:8px; font-size:14px; z-index:99999; display:none;
  align-items:center; gap:8px; }
#addcart_toast.show{ display:inline-flex; }
#addcart_toast b{ color:#7ed957; font-size:16px; }

/* ===== 商品营销角标（特价/人气/新品/推荐，右上角，多标竖排） ===== */
.sy_mod_f .pic_wrap{ position:relative; }
.corner_tags{
  position:absolute; top:0; right:0; z-index:5;
  display:flex; flex-direction:column; align-items:flex-end;
  pointer-events:none;
}
.sy_mod_f .pic_wrap .corner_tags .ct{
  display:inline-block;
  font-style:normal; font-size:11px; line-height:1; font-weight:600;
  color:#fff; padding:4px 7px 4px 8px; white-space:nowrap;
  border-radius:0 0 0 6px; margin-bottom:2px;
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}
.corner_tags .tag_sale{ background:linear-gradient(135deg,#ff8f2a,#ff5500); }
.corner_tags .tag_hot{ background:linear-gradient(135deg,#ff5252,#e1251b); }
.corner_tags .tag_new{ background:linear-gradient(135deg,#26cc7d,#0fa95f); }
.corner_tags .tag_rec{ background:linear-gradient(135deg,#4f8fff,#2f6be0); }

/* ===== 热销排行榜自然包裹内容：顶部与商品区对齐，底部无空白 ===== */
.sy_mod_f .sy_mod_f_bd{ display:flex !important; align-items:flex-start !important; }
.sy_mod_f .sy_mod_f_bd > .grid_s,
.sy_mod_f .sy_mod_f_bd > .grid_m,
.sy_mod_f .sy_mod_f_bd > .grid_e{ float:none !important; }
.sy_mod_f .grid_s{ align-self:flex-start !important; }
.sy_mod_f .grid_m{ align-self:flex-start !important; }
.sy_mod_f .grid_e{ align-self:flex-start !important; margin-top:-5px !important; display:block !important; }
.sy_mod_f .grid_e .hotrank_group{ display:block !important; }
.sy_mod_f .grid_e .hotrank_group.hide{ display:none !important; }
.sy_mod_f .grid_e .hotrank_list{ display:block; }