/* =========================================================
   Hot Products 独立样式（index_en_bm4style.asp 专用）
   - 图片框：正方形 250x250（PC 上宽高均不超过 250px）
   - 只保留一个外围边框
   - PC：一行 4 个 / 平板：一行 3 个 / 手机：一行 2 个
   ========================================================= */

/* ---------- 标题栏 ---------- */
.hp_title{
    margin: 0;
    padding: 16px 25px;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #1a6dcf, #3fdbf1);
    border-left: 4px solid #fdb913;
}

/* ---------- 列表容器 ---------- */
.hp_wrap{
    margin: 0 -8px;
    padding: 30px 0 10px;
    clear: both;
}
.hp_list{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

/* ---------- 单个产品（唯一外围边框） ---------- */
.hp_item{
    width: 25%;
    padding: 0 8px 25px;
    box-sizing: border-box;
}
.hp_inner{
    background: #ffffff;
    border: 1px solid #ececec;   /* 外围边框 */
    padding: 12px 12px 6px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.hp_inner:hover{
    box-shadow: 0 6px 18px rgba(26,109,207,.18);
    transform: translateY(-3px);
}

/* ---------- 图片框：正方形比例，PC 上最大 250x250 ---------- */
.hp_pic{
    position: relative;
    width: 100%;
    max-width: 250px;
    height: 0;
    padding-bottom: 100%;   /* 1:1 正方形 */
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
}
.hp_pic a{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp_pic img{
    max-width: 96%;
    max-height: 96%;
    display: block;
    border: 0;
    transition: transform .35s ease;
}
.hp_pic a:hover img{ transform: scale(1.06); }

/* ---------- 产品名称 / 型号 ---------- */
.hp_name{
    margin: 12px 0 4px;
    text-align: center;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
.hp_name a{
    color: #33363a;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp_name a:hover{ color: #1a6dcf; }

.hp_sn{
    margin: 0 0 8px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    color: #9aa0a6;
    line-height: 18px;
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hp_sn a{ color: #9aa0a6; text-decoration: none; }
.hp_sn a:hover{ color: #3fdbf1; }

/* ---------- 平板（768-991px）：一行 3 个 ---------- */
@media screen and (max-width: 991px){
    .hp_item{ width: 33.3333%; }
}

/* ---------- 手机（<768px）：一行 2 个 ---------- */
@media screen and (max-width: 767px){
    .hp_wrap{ margin: 0 -5px; padding-top: 20px; }
    .hp_item{ width: 50%; padding: 0 5px 15px; }
    .hp_inner{ padding: 8px; }
    .hp_name{ margin-top: 8px; }
}

/* ---------- 小屏手机（<420px） ---------- */
@media screen and (max-width: 420px){
    .hp_title{ padding: 12px 15px; font-size: 16px; }
}