/* =========================
   Home Items 模块（featured_items）
   ✅ PC：7列（随宽度降到 5/4/3）
   ✅ Mobile：3列 + 正方形封面 + 默认仅展示两行（6个），点击 View more 展开
   ========================= */

:root{
  --fm-blue:#355a9f;
  --fm-blue-soft:rgba(53,90,159,.08);
  --fm-blue-soft2:rgba(53,90,159,.12);
  --fm-blue-line:rgba(53,90,159,.14);
  --fm-text:#0f172a;
  --fm-muted:#64748b;
  --fm-card:#ffffff;
}

/* ====== Section ====== */
#home_items{
  padding: 34px 0 64px; /* ✅留白更大 */
}

#home_items .hi-inner{
  width: min(1320px, calc(100% - 140px)); /* ✅左右边距更大 */
  margin-inline: auto;
  box-sizing: border-box;
}

#featured_items{ position: relative; }

/* 两个区块：上下 */
#featured_items .hi-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px; /* ✅区块间距更大 */
}

/* ✅区块容器：去掉背景卡片（更干净） */
#featured_items .hi-category{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* 头部 */
#featured_items .hi-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px; /* ✅更松 */
  padding: 0 2px;
}

#featured_items .hi-head-left h3{
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: #111827;
  letter-spacing: 0.2px;
}

#featured_items .hi-head-left p{
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}

/* 头部右侧动作区 */
#featured_items .hi-head-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* =========================
   hi-all: text link + chevron (no box)
   ========================= */
#featured_items .hi-all{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* ✅ 无背景无边框无圆角 */
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  /* 文本风格 */
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  user-select: none;

  transition: color 160ms ease, opacity 160ms ease;
}

#featured_items .hi-all i{
  font-style: normal;
  opacity: .9;
  transform: translateY(-1px);
}

/* hover：更像“可点击的文字” */
#featured_items .hi-all:hover{
  color: var(--fm-blue);
}

/* 触屏：点击态 */
#featured_items .hi-all:active{
  opacity: .75;
}

/* ✅ 小屏稍微收一点字号（可选） */
@media (max-width: 520px){
  #featured_items .hi-all{
    font-size: 13px;
  }
}

/* ====== Grid ====== */
#featured_items .hi-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 22px 18px; /* ✅更松 */
}

/* ✅卡片本体：去“厚重卡片背景”，只保留封面卡片感 */
#featured_items .hi-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  position: relative;
  transform: translateY(0);
  transition: transform 160ms ease;
  padding: 4px; /* ✅让图片视觉小一点点（外圈留白） */
}

#featured_items .hi-card:hover{
  transform: translateY(-2px);
}

/* focus 统一品牌蓝 */
#featured_items .hi-card:focus,
#featured_items .hi-card:focus-visible{
  outline: 2px solid rgba(53,90,159,.40);
  outline-offset: 3px;
}

/* ✅封面：统一正方形 1:1 */
#featured_items .hi-cover{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* ✅关键：永远正方形 */
  background: #e5e7eb;
  overflow: hidden;

  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

/* 轻微暗角（更轻） */
#featured_items .hi-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 62%, rgba(0,0,0,0.08) 100%);
  pointer-events:none;
}

/* 高光扫过 */
#featured_items .hi-cover::before{
  content:"";
  position:absolute;
  inset:-40% -80%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: rotate(12deg) translateX(-40%);
  opacity:0;
  transition: opacity 180ms ease, transform 420ms ease;
  pointer-events:none;
}
#featured_items .hi-card:hover .hi-cover::before{
  opacity:1;
  transform: rotate(12deg) translateX(45%);
}

#featured_items .hi-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1);
  transition: transform 220ms ease;
}

#featured_items .hi-card:hover .hi-cover img{
  transform: scale(1.03);
}

/* 折扣角标（右上） */
/* 右上角折扣角贴片：贴边 + 仅右上/左下圆角 */
#featured_items .hi-off{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;

    height: 26px;
    line-height: 26px;
    padding: 0 12px;

    /* ✅只保留：右上 + 左下 */
    border-radius: 0 14px 0 14px;  /* TL TR BR BL */

    background: linear-gradient(180deg, #ff7a3d, #ff5a1f);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;

    /* 贴边时 box-shadow 会被 hi-cover 的 overflow:hidden 裁掉，所以用 drop-shadow 更自然 */
    filter: drop-shadow(0 10px 14px rgba(255,90,31,.22));
}

/* mobile：跟着封面圆角变小 */
@media (max-width: 860px){
    #featured_items .hi-off{
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        font-size: 11px;
        border-radius: 0 12px 0 12px; /* 配合你 mobile cover 12px */
    }
}



/* 文本区（留白更大一点） */
#featured_items .hi-body{
  padding: 10px 6px 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

#featured_items .hi-name{
  color:#111827;
  font-size:13px;
  font-weight:650;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* meta */
#featured_items .hi-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  line-height:1;
  color:#6b7280;
}

/* ✅改这里：评分不要背景/边框/胶囊，只保留纯文本 */
#featured_items .hi-rate{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 0;              /* ✅无内边距 */
  border-radius: 0;        /* ✅无圆角胶囊 */
  background: transparent; /* ✅无背景 */
  border: none;            /* ✅无边框 */
  color:#111827;
  font-weight:800;
}

#featured_items .hi-star{
  color:#f59e0b;
  font-size:11px;
  transform: translateY(-0.5px);
}

#featured_items .hi-score{
  font-size:11px;
  font-weight:900; /* ✅更像“纯数字”强调 */
}

/* 销量保持原样（并且 mobile 也要显示） */
#featured_items .hi-sold{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  color:#111827;
  font-weight:700;
  white-space:nowrap;
  margin-left: auto; /* ✅关键：强制靠右贴着 */
}
#featured_items .hi-sold span{
  color:#9ca3af;
  font-weight:900;
}

/* ====== “View more” ====== */
#featured_items .hi-more{
  display:none; /* 默认不显示（PC不需要） */
  margin-top: 14px;
  width: 100%;
  height: 38px;
  border-radius: 999px;

  /* ✅简约：线框 + 轻底色（同品牌蓝系） */
  border: 1px solid rgba(53,90,159,.22);
  background: rgba(53,90,159,.06);
  color: var(--fm-blue);

  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;          /* ✅去阴影 */
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#featured_items .hi-more:hover{
  transform: translateY(-1px);
  background: rgba(53,90,159,.10);
  border-color: rgba(53,90,159,.32);
}
#featured_items .hi-more:active{
  transform: translateY(0);
}


/* ====== Responsive columns ====== */
@media (max-width: 1380px){
  #featured_items .hi-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1200px){
  #home_items .hi-inner{ width: min(100%, calc(100% - 80px)); }
  #featured_items .hi-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ✅手机：永远 3列 + 默认只展示两行(6个) + View more */
@media (max-width: 860px){
  #home_items .hi-inner{ width: calc(100% - 28px); }

  #featured_items .hi-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }

  /* ✅不要再隐藏销量（你刚刚要求恢复） */
  /* #featured_items .hi-sold{ display:none !important; } */

  /* ✅默认仅两行：隐藏第7个开始 */
  #featured_items .hi-grid.hi-grid--collapsible.is-collapsed > .hi-card:nth-child(n+7){
    display: none;
  }

  /* 有按钮时显示 */
  #featured_items .hi-more{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ✅手机端更紧凑：避免“评分+销量”挤爆 */
  #featured_items .hi-meta{
    gap: 8px;
  }

  #featured_items .hi-rate{
    font-size: 10px;
  }

  #featured_items .hi-star{
    font-size: 10px;
  }

  #featured_items .hi-score{
    font-size: 10px;
  }

  #featured_items .hi-sold{
    padding: 4px 6px;
    font-size: 10px;
  }
}

/* 更窄手机：间距/字体再收一点（只影响 mobile） */
@media (max-width: 520px){
  #home_items{ padding: 26px 0 44px; }
  #home_items .hi-inner{ width: calc(100% - 22px); }

  #featured_items .hi-head{ margin-bottom: 14px; }
  #featured_items .hi-head-left h3{ font-size: 15px; }
  #featured_items .hi-head-left p{ font-size: 11px; margin-top: 4px; }

  #featured_items .hi-all{
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  #featured_items .hi-body{
    padding: 9px 4px 0;
    gap: 6px;
  }

  #featured_items .hi-name{
    font-size: 11px;
    line-height: 1.12;
    font-weight: 700;
  }
}

@media (max-width: 390px){
  #featured_items .hi-name{ font-size: 10px; }
}
/* =========================
   Mobile fixes: hi-sold 右贴 + 隐藏 suffix(span)
   ========================= */
@media (max-width: 860px){

  /* 1) 隐藏 “已出售/已售出/sold” 这类 suffix */
  #featured_items .hi-sold span{
    display: none !important;
  }

  /* 2) hi-meta：评分在左、销量在右（靠右贴着） */
  #featured_items .hi-meta{
    padding-top: 11px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 不再 space-between，避免被撑开怪异 */
    gap: 10px !important;
  }

  #featured_items .hi-sold{
    margin-left: auto !important;          /* ✅ 关键：推到最右侧 */
    justify-content: flex-end !important;
    padding: 0 !important;                 /* 手机端更简 */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    gap: 6px !important;
  }
}
/* =========================
   "View more" (mobile): text + chevron, no box
   ========================= */
#featured_items .hi-more{
  display: none; /* PC 默认不显示 */
}

@media (max-width: 860px){
  #featured_items .hi-more{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    width: 100% !important;
    height: auto !important;
    padding: 14px 0 2px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #6b7280 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  #featured_items .hi-more:hover{
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--fm-blue) !important;
  }

  #featured_items .hi-more .material-icons{
    padding-bottom: 2px;
    font-size: 18px !important;
    transform: translateY(1px) !important;
    color: inherit !important;
  }
}
/* =========================
   Mobile(<=860): 3列更紧凑，图片边距更小
   ========================= */
@media (max-width: 860px){

  /* 1) 整个模块左右留白再小一点（你现在是 28px） */
  #home_items .hi-inner{
    width: calc(100% - 18px) !important;  /* ✅左右各 9px */
  }

  /* 2) 3列间距更紧（你现在 14/12） */
  #featured_items .hi-grid{
    gap: 10px 10px !important;
  }

  /* 3) 去掉每张卡片外层 padding（你现在 padding:4px 会额外撑大“缝”） */
  #featured_items .hi-card{
    padding: 0 !important;
  }

  /* 4) 图片圆角/边框更轻一点，视觉更贴合 */
  #featured_items .hi-cover{
    border-radius: 12px !important;
  }

  /* 5) 文本区也收紧一点 */
  #featured_items .hi-body{
    padding: 8px 2px 0 !important;
    gap: 6px !important;
  }
}
/* Mobile: hi-more 不要点击变蓝/黏 hover */
@media (max-width: 860px){
  #featured_items .hi-more{
    color: #6b7280 !important;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  #featured_items .hi-more:focus,
  #featured_items .hi-more:active{
    color: #6b7280 !important;
    outline: none !important;
  }
}

/* 只有支持 hover 的设备才允许 hover 变色（避免手机黏住） */
@media (hover: hover) and (pointer: fine){
  #featured_items .hi-more:hover{
    color: var(--fm-blue) !important;
  }
}