/* -------------------suppliers页面---------------------- */
.sp-page{
background:#F7F9FC;
overflow:hidden;
}


.sp-hero{
padding:120px 20px 56px;
background:
radial-gradient(circle at 20% 30%,rgba(254,114,22,.16),transparent 35%),
linear-gradient(135deg,#08111B,#162538,#22384A);
}

.sp-hero-inner{
max-width:1430px;
margin:auto;
}

.sp-kicker{
display:inline-flex;
padding:10px 18px;
background:rgba(255,255,255,.08);
border-radius:999px;
font-size:13px;
color:#fff;
margin-bottom:24px;
}

.sp-title{
font-size:68px;
font-weight:900;
line-height:1.08;
color:#fff;
max-width:850px;
}

.sp-title span{color:#FE7216;}

.sp-desc{
margin-top:24px;
max-width:760px;
font-size:18px;
line-height:1.9;
color:rgba(255,255,255,.82);
}

.sp-stats{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:48px;
}

.sp-stat{
padding:24px 28px;
background:rgba(255,255,255,.06);
border-radius:22px;
}

.sp-num{
font-size:36px;
font-weight:900;
color:#fff;
}

.sp-label{
margin-top:6px;
color:rgba(255,255,255,.72);
}

/* FILTER */
.sp-filter{
background:#fff;
padding:18px 0;
border-bottom:1px solid #EEF2F6;
position:relative;
z-index:10;
}

.sp-filter-inner{
max-width:1430px;
margin:auto;
padding:0 20px;
display:flex;
gap:14px;
flex-wrap:wrap;
}

/* =========================
   ⭐ FIX CORE START
========================= */

.sp-filter-group{
position:relative;
display:inline-block;
}

/* 🔥 关键修复1：扩展 hover 热区（防断层） */
.sp-filter-group::before{
content:"";
position:absolute;
left:0;
right:0;
top:52px;
height:28px; /* 增大缓冲区，彻底解决鼠标“掉线” */
z-index:1;
}

/* filter button */
.sp-filter-item{
height:52px;
padding:0 22px;
display:flex;
align-items:center;
border-radius:999px;
text-decoration:none;
background:#F8FAFC;
color:#344054;
font-weight:700;
white-space:nowrap;
transition:.25s;
position:relative;
z-index:2;
}

.sp-filter-item:hover{
background:#FE7216;
color:#fff;
}

/* 🔥 关键修复2：submenu 向上“贴近”按钮 */
.sp-submenu{
display:none;
position:absolute;
top:52px;   /* 原56px → 改为贴合 */
left:0;
background:#fff;
min-width:240px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
padding:8px;
z-index:999;
}

/* 🔥 关键修复3：hover 保持连续 */
.sp-filter-group:hover .sp-submenu{
display:block;
}

/* submenu item */
.sp-submenu a{
display:block;
padding:10px 12px;
font-size:13px;
color:#333;
border-radius:8px;
text-decoration:none;
white-space:nowrap;
}

.sp-submenu a:hover{
background:#f5f5f5;
}

/* =========================
   ⭐ FIX CORE END
========================= */


/* LIST */
.sp-wrap{
max-width:1430px;
margin:auto;
padding:28px 20px 80px;
}

.sp-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}

/* CARD */
.sp-card{
background:#fff;
padding:32px;
border-radius:28px;
border:1px solid #EEF2F6;
position:relative;
transition:.3s;
}

.sp-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 70px rgba(0,0,0,.06);
}

.sp-badge{
position:absolute;
top:28px;
right:28px;
padding:10px 16px;
background:#FFF3E8;
color:#FE7216;
border-radius:999px;
font-size:12px;
font-weight:800;
}

.sp-head{
display:flex;
gap:20px;
}

.sp-logo{
width:82px;
height:82px;
overflow:hidden;
border-radius:20px;
border:1px solid #eee;
}

.sp-logo img{
width:100%;
height:100%;
object-fit:cover;
}

.sp-company{
flex:1;
}

.sp-company h2{
font-size:26px;
margin-bottom:12px;
}

.sp-company a{
color:#111827;
text-decoration:none;
}

.sp-text{
margin:20px 0;
line-height:1.8;
color:#475467;
}

.sp-tags{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:18px;
}

.sp-tags a{
display:inline-block;
padding:10px 14px;
background:#FFF3E8;
color:#FE7216;
border-radius:999px;
font-size:12px;
text-decoration:none;
}

.sp-tags a:hover{
background:#FE7216;
color:#fff;
}

.sp-link{
display:inline-flex;
margin-top:26px;
padding:14px 22px;
background:#FE7216;
border-radius:999px;
color:#fff;
text-decoration:none;
}

/* RESPONSIVE */
@media(max-width:1200px){
.sp-grid{grid-template-columns:1fr;}
}

@media(max-width:768px){
.sp-title{font-size:42px;}
.sp-head{flex-direction:column;}
}

/* PAGINATION */
.pagelist{
    width:100%;
    margin:50px 0 20px;
}

.pagelist ul{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:0;
    margin:0;
    list-style:none;
    flex-wrap:wrap;
}

.pagelist li{
    display:inline-flex;
}

.pagelist li a,
.pagelist li span{
    min-width:42px;
    height:42px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #E4E7EC;
    border-radius:8px;
    background:#fff;
    color:#344054;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:all .25s ease;
}

/* hover */
.pagelist li a:hover{
    background:#FE7216;
    border-color:#FE7216;
    color:#fff;
    box-shadow:0 4px 12px rgba(254,114,22,.25);
}

/* 当前页 */
.pagelist li a.active,
.pagelist li span.active{
    background:#FE7216;
    border-color:#FE7216;
    color:#fff;
    font-weight:600;
}

/* 上一页 下一页 */
.pagelist li:first-child a,
.pagelist li:last-child a{
    padding:0 18px;
}

/* 禁用状态 */
.pagelist li span{
    color:#98A2B3;
    background:#F9FAFB;
}


/* 手机端 */
@media(max-width:768px){

    .pagelist{
        margin:35px 0 15px;
    }

    .pagelist ul{
        gap:6px;
    }

    .pagelist li a,
    .pagelist li span{
        min-width:36px;
        height:36px;
        padding:0 10px;
        font-size:13px;
        border-radius:7px;
    }

}

.sp-filter-item.active,
.sp-submenu a.active{

background:#ff6b00;
color:#fff;
}


/* -------------------index-page---------------------- */
.elec-pr{
    padding-top:0px;
    padding-bottom:90px;
    background:#ffffff;
}

/* HEADER */
.elec-pr__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.elec-pr__title h2{
    font-size:38px;
    font-weight:800;
    margin:0;
}

.elec-pr__title p{
    margin-top:6px;
    color:#666;
    font-size:14px;
}

/* TAB */
.elec-pr__tabs .nav-link{
    border:1px solid #eee;
    border-radius:10px;
    padding:8px 14px;
    font-size:13px;
    color:#333;
    margin-right:8px;
    background:#fff;
}

.elec-pr__tabs .nav-link.active{
    background:#FF7114;
    color:#fff;
    border-color:#FF7114;
}

/* GRID */
.elec-pr__grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
}

/* CARD (important fix: equal height) */
.elec-pr__card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,0.05);
    display:flex;
    flex-direction:column;
    height:100%;
    transition:.25s;
}

.elec-pr__card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* IMAGE FIX (NO STRETCH) */
.elec-pr__img{
    width:100%;
    aspect-ratio: 4 / 3;   /* 🔥 核心：保持比例 */
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.elec-pr__img img{
    width:100%;
    height:100%;
    object-fit:contain;  /* 🔥 改关键点：不裁切、不压扁 */
}

/* CONTENT */
.elec-pr__content{
    padding:12px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.elec-pr__cat{
    font-size:11px;
    color:#777;
}

.elec-pr__name{
    font-size:13px;
    font-weight:700;
    margin:6px 0;
    line-height: 15px;
    min-height:25px; /* keeps alignment */
}

/* META */
.elec-pr__meta{
    font-size:11px;
    color:#666;
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}

/* BUTTON FIX (always bottom aligned) */
.elec-pr__btn{
    margin-top:auto;
    display:block;
    text-align:center;
    padding:9px;
    font-size:12px;
    background:#FF7114;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
}

.elec-pr__btn:hover,
.elec-pr__btn:focus,
.elec-pr__btn:active{
    color:#fff !important;
    text-decoration:none;
    background:#e9650f; /* 可选：悬停稍微变深 */
}

/* RESPONSIVE */
@media(max-width:1200px){
    .elec-pr__grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:768px){
    .elec-pr__grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:480px){
    .elec-pr__grid{grid-template-columns:1fr;}
}


.elec-qs{
    padding: 90px 0;
    background: #f5f7fb;
}

/* IMPORTANT: no custom padding, inherit global container */
.elec-qs__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.elec-qs__title h2{
    font-size:38px;
    font-weight:800;
    margin:0;
    letter-spacing:-0.6px;
}

.elec-qs__title p{
    margin-top:6px;
    color:#666;
    font-size:14px;
}

/* MORE BUTTON */
.elec-qs__more{
    background:#111;
    color:#fff;
    padding:10px 18px;
    border-radius:10px;
    font-size:13px;
    text-decoration:none;
}

/* GRID */
.elec-qs__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

/* CARD (more premium minimal style) */
.elec-qs__card{
    background:#fff;
    border-radius:14px;
    padding:18px;
    border:1px solid rgba(0,0,0,0.05);
    transition:.25s;

    display:flex;
    flex-direction:column;
    height:100%;
}

.elec-qs__card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* TOP */
.elec-qs__top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.elec-qs__logo{
    width:60px;
    height:60px;
    border-radius:12px;
    background:#ffffff;
    border:1px solid #e8edf3;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.elec-qs__logo img{
    max-width:80%;
    max-height:80%;
    object-fit:contain;
}

/* NAME */
.elec-qs__name{
    font-size:15px;
    font-weight:700;
    color:#111;
}

.elec-qs__badge{
    font-size:10px;
    background:#e8f2ff;
    color:#0a66ff;
    padding:2px 6px;
    border-radius:6px;
    margin-left:6px;
}

.elec-qs__meta{
    font-size:12px;
    color:#777;
    margin-top:2px;
}

/* TAGS */
.elec-qs__tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0 14px;
}

.elec-qs__tag{
    font-size:11px;
    background:#f4f6fa;
    padding:4px 8px;
    border-radius:20px;
    color:#555;
}

/* STATS */
.elec-qs__stats{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#666;
    margin-bottom:14px;
}

/* BUTTON */
.elec-qs__btn{
    margin-top:auto;
    display:block;
    text-align:center;
    padding:9px;
    font-size:12px;
    background:#FF7114;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
}
.elec-qs__btn:hover,
.elec-qs__btn:focus,
.elec-qs#__btn:active{
    color:#fff !important;
    text-decoration:none;
    background:#e9650f; /* 可选：悬停稍微变深 */
}

/* RESPONSIVE */
@media(max-width:1100px){
    .elec-qs__grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
    .elec-qs__grid{grid-template-columns:1fr;}

    .elec-qs__header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}



.category-banner{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        120deg,
        #FE7317 0%,
        #FF9650 18%,
        #F9F7F5 38%,
        #EAF4FD 58%,
        #0A4E8B 100%
    );
}

/* 左侧橙色能量面 */
.category-banner::before{
    content:"";

    position:absolute;

    left:-180px;
    top:-120px;

    width:820px;
    height:820px;

    border-radius:
        58% 42%
        63% 37%
        /
        45% 60%
        40% 55%;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.32),
        rgba(255,255,255,0)
    );

    transform:
        rotate(-18deg);

    backdrop-filter:
        blur(12px);

    opacity:.85;
}

/* 右侧蓝色科技曲面 */
.category-banner::after{
    content:"";

    position:absolute;

    right:-260px;
    bottom:-280px;

    width:980px;
    height:820px;

    border-radius:
        40% 60%
        48% 52%
        /
        58% 42%
        62% 38%;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        rgba(255,255,255,0)
    );

    transform:
        rotate(20deg);

    opacity:.95;
}

/* 标题阅读区 */
.category-banner .container{
    position:relative;

    z-index:5;

    padding:40px 60px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.55),
        rgba(255,255,255,.22)
    );

    backdrop-filter:
        blur(18px);
}

.pagelist ul{text-align:center;margin:20px 0;}
				.pagelist li{display:inline-block;margin:0 2px;}
				.pagelist li a{color:#666;display:inline-block;border:1px solid #ddd;padding:6px 15px;}
				.pagelist li a:hover{border-color:#000000;background:#000000;color:#fff;}
				.pagelist li.active a{border-color:#000000;background:#000000;color:#fff;}
				
				
				
/* ===== Hero ===== */

.ec-hero{

position:relative;

width:100vw;

margin-left:calc(50% - 50vw);

overflow:hidden;

padding:100px 0;

margin-bottom:60px;

background:

radial-gradient(
circle at 15% 50%,
rgba(254,114,22,.18),
transparent 40%
),

radial-gradient(
circle at 80% 20%,
rgba(255,170,90,.12),
transparent 35%
),

linear-gradient(
135deg,
#071018,
#121B28,
#1D2736

);

}



/* Glow */

.ec-hero:before{

content:'';

position:absolute;

right:-250px;

top:-150px;

width:800px;

height:800px;

background:

radial-gradient(
circle,
rgba(254,114,22,.28),
transparent 70%
);

filter:blur(60px);

}



/* Grid */

.ec-hero:after{

content:'';

position:absolute;

inset:0;

background:

linear-gradient(
rgba(255,255,255,.02) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.02) 1px,
transparent 1px
);

background-size:
40px 40px;

}



/* Hero Content */

.ec-head{

max-width:1430px;

margin:auto;

padding:0 20px;

position:relative;

z-index:2;

}



.ec-line{

width:90px;

height:4px;

margin-bottom:24px;

border-radius:999px;

background:

linear-gradient(
90deg,
#FE7216,
transparent
);

}



.ec-title{

font-size:58px;

font-weight:800;

line-height:1.15;

color:#fff;

margin:0 0 16px;

}



.ec-desc{

max-width:820px;

font-size:17px;

line-height:1.9;

margin:0;

color:

rgba(
255,
255,
255,
.82
);

}



/* ===== Main ===== */

.ec-wrap{

max-width:1430px;

margin:auto;

padding:0 20px 80px;

}



/* Category Row */

.ec-row{

display:grid;

grid-template-columns:
220px 1fr;

gap:60px;

padding:40px 0;

border-bottom:

1px solid #F3F4F6;

}



/* Main Category */

.ec-main h2{

margin:0;

}



.ec-main a{

display:inline-block;

font-size:22px;

font-weight:700;

line-height:1.45;

color:#111;

text-decoration:none;

transition:.2s;

}



.ec-main a:hover{

color:#FE7216;

}



.ec-view{

margin-top:10px;

font-size:13px;

color:#98A2B3;

}



/* Sub Categories */

.ec-sub{

columns:4;

column-gap:40px;

}



.ec-sub a{

display:block;

position:relative;

padding-left:14px;

margin-bottom:14px;

break-inside:avoid;

font-size:15px;

line-height:1.65;

color:#555;

text-decoration:none;

transition:.2s;

}



.ec-sub a:before{

content:'';

position:absolute;

left:0;

top:10px;

width:4px;

height:4px;

border-radius:50%;

background:#D0D5DD;

transition:.2s;

}



.ec-sub a:hover{

padding-left:18px;

color:#FE7216;

}



.ec-sub a:hover:before{

background:#FE7216;

}



/* Tablet */

@media(max-width:1200px){

.ec-row{

grid-template-columns:
210px 1fr;

}

.ec-sub{

columns:3;

}

}



/* Mobile */

@media(max-width:768px){

.ec-hero{

padding:70px 0;

margin-bottom:30px;

}

.ec-title{

font-size:34px;

}

.ec-desc{

font-size:15px;

}

.ec-wrap{

padding:0 14px 40px;

}

.ec-row{

grid-template-columns:
1fr;

gap:20px;

padding:28px 0;

}

.ec-main a{

font-size:20px;

}

.ec-sub{

columns:2;

column-gap:18px;

}

}


.esvc-root,
.esvc-root *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

/* =========================
   FULL WIDTH BANNER (100vw)
========================= */

.esvc-banner{
    width:100vw;
    height:400px;
    overflow:hidden;
    position:relative;
    margin-left:calc(-50vw + 50%);
}

.esvc-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* dark overlay like YouTube */
.esvc-banner:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        rgba(0,0,0,.05),
        rgba(0,0,0,.25)
    );
}

/* =========================
   MAIN WRAPPER (1430px FIXED)
========================= */

.esvc-container{
    max-width:1430px;
    margin:0 auto;
    padding:0 16px;
}

/* =========================
   HEADER
========================= */

.esvc-header{
    display:flex;
    align-items:flex-end;
    gap:18px;
    margin-top:-55px;
    position:relative;
}

.esvc-logo{
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    border:5px solid #fff;
    background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
    flex-shrink:0;
}

.esvc-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.esvc-info h1{
    font-size:34px;
    font-weight:700;
}

.esvc-info p{
    font-size:14px;
    color:#666;
}

/* =========================
   NAV
========================= */

.esvc-nav{
    display:flex;
    gap:26px;
    border-bottom:1px solid #e6e6e6;
    margin-top:16px;
    overflow-x:auto;
}

.esvc-nav a{
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    color:#666;
    line-height:52px;
    white-space:nowrap;
}

.esvc-nav a.active{
    color:#111;
    border-bottom:3px solid #111;
}

/* =========================
   TOP BAR
========================= */

.esvc-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.esvc-topbar h2{
    font-size:20px;
}

/* =========================
   VIDEO GRID (STABLE 5 COL)
========================= */

.esvc-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:14px;
}

/* card */
.esvc-card{
    min-width:0;
}

/* thumb */
.esvc-thumb{
    position:relative;
    aspect-ratio:16/9;
    border-radius:10px;
    overflow:hidden;
    background:#eee;
}

.esvc-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* play */
.esvc-play{
    position:absolute;
    left:50%;
    top:50%;
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
    background:rgba(0,0,0,.65);
    border-radius:50%;
}

.esvc-play:before{
    content:"";
    position:absolute;
    left:20px;
    top:15px;
    border-left:15px solid #fff;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
}

/* time */
.esvc-time{
    position:absolute;
    right:6px;
    bottom:6px;
    font-size:11px;
    background:#000;
    color:#fff;
    padding:2px 5px;
    border-radius:3px;
}

/* text spacing (tight like YouTube) */
.esvc-title{
    font-size:13px;
    font-weight:600;
    margin-top:6px;
    line-height:1.35;
    height:36px;
    overflow:hidden;
}

.esvc-meta{
    font-size:12px;
    color:#777;
    margin-top:3px;
}

/* =========================
   RESPONSIVE SYSTEM
========================= */

@media(max-width:1200px){
    .esvc-grid{grid-template-columns:repeat(4,1fr);}
}

@media(max-width:992px){
    .esvc-grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:768px){

    .esvc-banner{
        height:240px;
    }

    .esvc-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .esvc-logo{
        width:85px;
        height:85px;
    }

    .esvc-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .esvc-grid{
        grid-template-columns:1fr;
    }
}


.mdp-wrap{
    width:100%;
    padding:20px 0 50px;
    background:#f5f5f5;
    color:#333;
}

.mdp-container{
    max-width:1455px;
    margin:auto;
    padding:0 15px;
}

/* ================= 顶部区域 ================= */

.mdp-top{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

/* ================= 左侧图片 ================= */

.mdp-gallery{
    width:350px;
    background:#fff;
    border-radius:12px;
    padding:15px;
    flex-shrink:0;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.mdp-main{
    width:100%;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #eee;
    background:#fff;
}

.mdp-item{
    display:block;
}

.mdp-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain; /* 推荐，产品图不裁切 */
    display:block;
}

/* 删除缩略图区域 */
.mdp-thumb{
    display:none;
}

/* 手机 */

@media(max-width:768px){

    .mdp-gallery{
        width:100%;
    }

}
/* ================= 中间信息 ================= */

.mdp-info{
    flex:1;
    min-width:0;
    background:#fff;
    border-radius:12px;
    padding:25px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* 标题 */

.mdp-title{
    font-size:28px;
    line-height:1.5;
    color:#111;
    font-weight:700;
}

/* 价格 */

.mdp-price-box{
    margin-top:20px;
    background:#fff7f2;
    border:1px solid #ffe0cc;
    border-radius:10px;
    padding:18px;
}

.mdp-price{
    font-size:34px;
    color:#ff6a00;
    font-weight:700;
}

.mdp-moq{
    margin-top:8px;
    font-size:14px;
    color:#666;
}

/* 参数 */

.mdp-params{
    margin-top:25px;
    border-top:1px solid #f1f1f1;
}

.mdp-param{
    display:flex;
    padding:14px 0;
    border-bottom:1px solid #f7f7f7;
    font-size:14px;
}

.mdp-param-name{
    width:140px;
    color:#888;
    flex-shrink:0;
}

.mdp-param-value{
    flex:1;
    color:#222;
    line-height:1.7;
}

/* 按钮 */

.mdp-actions{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.mdp-btn{
    height:48px;
    padding:0 30px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:600;
    transition:.2s;
}

.mdp-btn-primary{
    background:#ff6a00;
    color:#fff;
}

.mdp-btn-primary:hover{
    background:#e65f00;
    color:#fff;
}

.mdp-btn-whatsapp{
    background:#25D366;
    color:#fff;
}

/* ================= 右侧商家 ================= */

.mdp-sidebar{
    width:320px;
    flex-shrink:0;

    position:sticky;
    top:20px;

    align-self:flex-start;
}

/* 商家卡 */

.mdp-company{
    background:#fff;
    border-radius:12px;
    padding:22px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* 商家顶部 */

.mdp-company-top{
    display:flex;
    gap:12px;
    align-items:center;
}

.mdp-company-logo{
    width:72px;
    height:72px;
    border-radius:10px;
    object-fit:cover;
    border:1px solid #eee;
}

.mdp-company-name{
    font-size:17px;
    line-height:1.5;
    font-weight:700;
}

.mdp-verified{
    margin-top:6px;
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    background:#fff3e8;
    color:#ff6a00;
    font-size:12px;
}

/* 商家信息 */

.mdp-company-info{
    margin-top:20px;
}

.mdp-company-item{
    padding:10px 0;
    border-bottom:1px solid #f5f5f5;
    font-size:14px;
    line-height:1.7;
}

.mdp-company-item span{
    color:#888;
}

/* 商家按钮 */

.mdp-company-actions{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mdp-company-btn{
    height:46px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:600;
}

.mdp-company-btn-primary{
    background:#ff6a00;
    color:#fff;
}

.mdp-company-btn-primary:hover{
    background:#ff6a00;
    color:#fff;
}

.mdp-company-btn-whatsapp{
    background:#25D366;
    color:#fff;
}

/* ================= 产品详情 ================= */

.mdp-detail{
    margin-top:30px;

    /* 关键 */
    width:calc(100% - 340px);
}

.mdp-detail-box{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* 标题 */

.mdp-detail-title{
    height:60px;
    display:flex;
    align-items:center;
    padding:0 25px;
    border-bottom:1px solid #f1f1f1;
    font-size:20px;
    font-weight:700;
}

/* 内容 */

.mdp-detail-content{
    padding:25px;
    font-size:15px;
    line-height:1.9;
    color:#555;
}

/* 富文本兼容 */

.mdp-detail-content img,
.mdp-detail-content video,
.mdp-detail-content iframe{
    max-width:100% !important;
    height:auto !important;
}

.mdp-detail-content table{
    width:100% !important;
    display:block;
    overflow-x:auto;
}

.mdp-detail-content *{
    max-width:100% !important;
}

/* ================= 平板 ================= */

@media (max-width:1200px){

.mdp-top{
display:flex;
flex-direction:column;
gap:16px;
}

.mdp-gallery,
.mdp-info,
.mdp-sidebar,
.mdp-detail{
width:100% !important;
max-width:100%;
}

.mdp-sidebar{
position:static;
}

}


/* ================= 手机 ================= */

@media (max-width:768px){

.mdp-wrap{
padding:10px 0 30px;
}

.mdp-container{
padding:0 12px;
}

.mdp-top{
display:flex;
flex-direction:column;
gap:12px;
}

.mdp-gallery,
.mdp-info,
.mdp-sidebar,
.mdp-company,
.mdp-detail{
width:100% !important;
max-width:100%;
min-width:0;
}

.mdp-info{
padding:18px;
}

.mdp-title{
font-size:22px;
line-height:1.45;
}

.mdp-price{
font-size:28px;
}

.mdp-param{
flex-direction:column;
gap:6px;
}

.mdp-param-name{
width:100%;
}

.mdp-actions{
display:flex;
flex-direction:column;
}

.mdp-btn{
width:100%;
}

.mdp-company-actions{
display:flex;
flex-direction:column;
}

.mdp-company-btn{
width:100%;
}

}

.espec-wrap{
border:1px solid #e8edf3;
border-radius:16px;
overflow:hidden;
background:#fff;
margin-top:24px;
}

.espec-row{

display:grid;

grid-template-columns:220px 1fr;

align-items:stretch;

border-bottom:1px solid #f1f4f8;

}

.espec-row:last-child{
border-bottom:none;
}

.espec-name{

padding:12px 24px;

background:#fafbfd;

font-size:13px;

font-weight:600;

color:#667085;

line-height:1.45;

display:flex;

align-items:center;

}

.espec-value{

padding:12px 30px;

font-size:14px;

font-weight:500;

color:#111827;

line-height:1.7;

word-break:break-word;

display:flex;

align-items:center;

}

.espec-row:hover .espec-name{
background:#fff6ef;
}

.espec-row:hover .espec-value{
background:#fffdfb;
}


/* mobile */

@media(max-width:768px){

.espec-row{
grid-template-columns:1fr;
}

.espec-name{

padding:10px 16px 4px;

}

.espec-value{

padding:0 16px 12px;

}

}


/* ================= Inquiry Modal ================= */

.inquiry-mask{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    display:none;
    z-index:9998;
}

.inquiry-modal{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:420px;
    background:#fff;
    border-radius:12px;
    z-index:9999;
    display:none;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.2);
}

.inquiry-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    background:#ff6a00;
    color:#fff;
    font-size:16px;
    font-weight:600;
}

.inquiry-header button{
    background:none;
    border:none;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}

.inquiry-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.inquiry-body input,
.inquiry-body textarea{
    width:100%;
    border:1px solid #eee;
    border-radius:8px;
    padding:10px 12px;
    font-size:14px;
    outline:none;
}

.inquiry-body textarea{
    height:100px;
    resize:none;
}

.inquiry-submit{
    height:44px;
    background:#ff6a00;
    color:#fff;
    border:none;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}

.inquiry-submit:hover{
    background:#e65f00;
}



/* ================= PLATFORM BASE ================= */

.es-page{
background:#F5F7FA;
padding:50px 0 90px;
}

.es-wrap{
max-width:1430px;
margin:0 auto;
padding:0 18px;
}

/* ================= GRID ================= */

.es-grid{
display:grid;
grid-template-columns:1.2fr 1.7fr 1.1fr;
gap:22px;
align-items:start;
}

/* ================= CARD ================= */

.card{
background:#fff;
border:1px solid #E5EAF0;
border-radius:14px;
overflow:hidden;
}

/* ================= LEFT ================= */

.es-gallery{
padding:14px;
}

.es-main-img{
width:100%;
height:520px;
object-fit:contain;
border-radius:10px;
display:block;
}

.es-thumbs{
display:flex;
gap:10px;
margin-top:12px;
overflow-x:auto;
}

.es-thumb{
width:70px;
height:70px;
object-fit:contain;
border-radius:8px;
border:1px solid #E5EAF0;
cursor:pointer;
flex:none;
background:#fff;
}

.es-thumb.active{
border:2px solid #C8A24A;
}

/* ================= CENTER ================= */

.es-center{
padding:22px;
}

.es-title{
font-size:26px;
font-weight:900;
color:#111;
line-height:1.35;
margin:0;
}

.es-sec{
font-size:12px;
font-weight:800;
letter-spacing:.08em;
margin-top:22px;
color:#111;
}

.es-desc{
font-size:13px;
line-height:1.9;
color:#555;
margin-top:10px;
}

.es-spec{
margin-top:14px;
border-top:1px solid #EEF2F7;
}

.es-spec-item{
display:flex;
justify-content:space-between;
gap:20px;
padding:12px 0;
border-bottom:1px solid #F3F5F8;
font-size:13px;
}

.es-spec-item dt{
font-weight:700;
color:#555;
}

.es-spec-item dd{
margin:0;
font-weight:700;
color:#111;
text-align:right;
}

/* ================= RIGHT ================= */

.es-right{
display:flex;
flex-direction:column;
gap:12px;
}

.es-supplier{
padding:16px;
}

.es-supplier-head{
display:flex;
gap:12px;
}

.es-logo{ width:58px; height:58px; object-fit:contain; background:#fff; border-radius:12px; border:1px solid #E5EAF0; padding:6px; flex:none; display:block; }

.es-company{
font-size:15px;
font-weight:900;
line-height:1.5;
}

.es-vip{
display:inline-block;
margin-top:6px;
padding:4px 10px;
border-radius:20px;
background:#111827;
color:#F5D98B;
font-size:11px;
}

.es-credit{
margin-top:14px;
padding:14px;
background:#FAFBFC;
border-radius:12px;
}

.es-score{
font-size:26px;
font-weight:900;
color:#C8A24A;
}

.es-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}

.es-tag{
font-size:11px;
padding:4px 8px;
border-radius:6px;
border:1px solid #E5EAF0;
}

.es-agent{
padding:16px;
}

.es-agent-head{
display:flex;
gap:10px;
}

.es-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; display:block; background:#F3F4F6; border:1px solid #E5EAF0; }

.es-meta{
margin-top:10px;
font-size:12px;
line-height:1.9;
}

.es-btn{
width:100%;
margin-top:10px;
padding:12px;
border:none;
border-radius:10px;
font-weight:800;
cursor:pointer;
}

.primary{
background:#C8A24A;
}

.dark{
background:#111827;
color:#fff;
}

/* ================= RELATED ================= */

.es-related{
margin-top:14px;
margin-bottom:0;
}

.es-related-title{
margin-bottom:10px;
}



.es-grid-8{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:10px;
}
.es-grid-8 .es-item{
line-height:1.15;
font-size:12px;
}

.es-grid-8 .es-item img{
margin-bottom:4px;
}

.es-item{
padding:10px;
background:#fff;
border:1px solid #E5EAF0;
border-radius:10px;
text-align:center;
}

.es-item img{
width:100%;
height:70px;
object-fit:contain;
display:block;
margin-bottom:8px;
}

/* ================= DETAIL ================= */

.es-detail{
margin-top:32px;
padding:34px;
}

.es-detail-title{
font-size:28px;
font-weight:900;
margin-bottom:30px;
}

.es-content{
font-size:15px;
line-height:2;
color:#444;
}

.es-content img{
max-width:100%;
height:auto;
display:block;
margin:24px auto;
border-radius:12px;
}

.es-content table{
width:100%;
border-collapse:collapse;
margin:24px 0;
}

.es-content td,
.es-content th{
border:1px solid #E8EDF3;
padding:14px;
}

.es-content h1,
.es-content h2,
.es-content h3{
margin:34px 0 18px;
}

.es-content p{
margin-bottom:18px;
}

/* ================= MOBILE ================= */

@media (max-width:1200px){

.es-grid{
grid-template-columns:1fr;
gap:18px;
}

.es-main-img{
height:420px;
}

.es-detail{
padding:22px;
}

.es-grid-8{
grid-template-columns:repeat(4,1fr);
}

}


@media (max-width:992px){

.es-main-img{
height:380px;
}

.es-title{
font-size:24px;
}

.es-grid-8{
grid-template-columns:repeat(3,1fr);
}

}


@media (max-width:768px){

.es-main-img{
height:320px;
}

.es-grid-8{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.es-item img{
height:60px;
}

.es-center{
padding:18px;
}

}


@media (max-width:480px){

.es-main-img{
height:260px;
}

.es-title{
font-size:20px;
}

.es-grid-8{
grid-template-columns:repeat(1,1fr);
}

.es-detail{
padding:16px;
}

.es-item{
padding:12px;
}

}


/* ================= RFQ POPUP ================= */ .rfq-mask{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:20px; z-index:99999; } .rfq-mask.show{ display:flex; } .rfq-modal{ width:100%; max-width:650px; background:#fff; border-radius:18px; padding:34px; position:relative; box-sizing:border-box; animation:rfq .25s ease; } @keyframes rfq{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } } .rfq-close{ position:absolute; right:20px; top:15px; font-size:34px; cursor:pointer; color:#999; } .rfq-title{ font-size:28px; font-weight:900; margin-bottom:24px; } .rfq-form{ display:flex; flex-direction:column; gap:14px; } .rfq-form input, .rfq-form textarea{ width:100%; padding:14px; border:1px solid #E5EAF0; border-radius:10px; box-sizing:border-box; font-size:14px; } .rfq-form textarea{ height:140px; resize:none; } .rfq-submit{ height:52px; background:#C8A24A; border:none; border-radius:10px; font-weight:800; cursor:pointer; }


.spv21{

background:#F3F6FB;
color:#0B1220;
}

/* container */
.spv21-container{
max-width:1430px;
margin:auto;
padding:0 28px;
}

/* ================= HERO ================= */

.spv21-hero{
position:relative;
padding:120px 0 90px;
overflow:hidden;

/* balanced premium background (NOT WHITE, NOT DARK) */
background:
radial-gradient(circle at 15% 20%, rgba(254,115,23,.10), transparent 42%),
radial-gradient(circle at 85% 25%, rgba(5,67,125,.10), transparent 45%),
linear-gradient(180deg,#0B1220 0%,#111827 100%);
}

/* subtle grid */
.spv21-hero:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:80px 80px;
opacity:.18;
pointer-events:none;
}

/* layout */
.spv21-head{
display:grid;
grid-template-columns:160px 1fr;
gap:42px;
align-items:center;
position:relative;
z-index:2;
}

/* LOGO */
.spv21-logo{
width:160px;
height:160px;
border-radius:20px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.spv21-logo img{
width:78%;
height:78%;
object-fit:contain;
}

/* TITLE */
.spv21-title{
font-size:48px;
font-weight:800;
color:#fff;
margin:0;
line-height:1.05;
}

/* VERIFIED (platform badge) */
.spv21-badge{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:14px;
padding:10px 16px;
border-radius:999px;

background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(10px);

color:#fff;
font-size:12px;
font-weight:700;
}

.spv21-badge:before{
content:"";
width:10px;
height:10px;
border-radius:50%;
background:#22C55E;
box-shadow:0 0 0 6px rgba(34,197,94,.18);
}

/* DESCRIPTION */
.spv21-desc{
margin-top:20px;
font-size:15px;
line-height:1.9;
color:rgba(255,255,255,.75);
max-width:1000px;
}

/* META */
.spv21-meta{
margin-top:22px;
display:flex;
gap:24px;
flex-wrap:wrap;
font-size:13px;
color:rgba(255,255,255,.8);
}

/* ACTIONS */
.spv21-actions{
margin-top:34px;
display:flex;
gap:14px;
}

.spv21-btn{
height:48px;
padding:0 22px;
border-radius:12px;
font-size:13px;
font-weight:600;
border:none;
cursor:pointer;
}

.spv21-primary{
background:#FE7317;
color:#fff;
box-shadow:0 20px 50px rgba(254,115,23,.35);
}

.spv21-ghost{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);
color:#fff;
}

/* ================= SECTION ================= */

.spv21-section{
padding:80px 0;
}

.spv21-h2{
font-size:22px;
font-weight:700;
margin-bottom:24px;
}

/* ================= PRODUCT GRID ================= */

.spv21-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:14px;
}

/* CARD */
.spv21-card{
background:#fff;
border-radius:14px;
overflow:hidden;
border:1px solid #E6EDF5;
transition:.2s;
}

.spv21-card:hover{
transform:translateY(-5px);
box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.spv21-card img{
width:100%;
aspect-ratio:1;
object-fit:cover;
display:block;
}

/* BODY */
.spv21-body{
padding:10px 10px 12px;
}

/* CATEGORY (FIXED SINGLE LINE) */
.spv21-cat{
font-size:10px;
color:#64748B;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-bottom:4px;
}

.spv21-cat a{
color:#64748B;
text-decoration:none;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* TITLE */
.spv21-name{
font-size:14px;
line-height:1.2;
margin:0;
height:40px;
overflow:hidden;
}

.spv21-name a{
color:#0B1220;
text-decoration:none;
font-weight:500;
}

/* STATUS */
.spv21-status{
margin-top:6px;
display:flex;
justify-content:space-between;
font-size:10px;
color:#94A3B8;
}

.spv21-status .stock{
color:#16A34A;
font-weight:600;
}

/* ACTION */
.spv21-view{
margin-top:8px;
font-size:10px;
}

.spv21-view a{
color:#FE7317;
text-decoration:none;
font-weight:600;
}

/* ================= ABOUT ================= */

.spv21-about{
display:grid;
grid-template-columns:2fr 1fr;
gap:30px;
}

.spv21-panel{
background:#fff;
border-radius:16px;
padding:28px;
font-size:14px;
line-height:1.9;
color:#64748B;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
.spv21-grid{grid-template-columns:repeat(6,1fr);}
}

@media(max-width:992px){
.spv21-head{grid-template-columns:1fr;}
.spv21-grid{grid-template-columns:repeat(4,1fr);}
.spv21-about{grid-template-columns:1fr;}
.spv21-title{font-size:38px;}
}

@media(max-width:640px){
.spv21-grid{grid-template-columns:repeat(2,1fr);}
.spv21-title{font-size:28px;}
}