/* =========================================================
ELECSUPPLIERS HOME MIDDLE CONTENT
========================================================= */

.esx-home-middle,
.esx-home-middle * {
    box-sizing: border-box;
}

.esx-home-middle {
    --esx-orange: #ff7316;
    --esx-orange-dark: #e65e08;
    --esx-black: #111111;
    --esx-title: #17191c;
    --esx-text: #35393e;
    --esx-muted: #777d84;
    --esx-border: #e7e9ec;
    --esx-light: #f6f7f8;
    --esx-white: #ffffff;

    width: 100%;
    background: #ffffff;
    color: var(--esx-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        Helvetica,
        sans-serif;
}

.esx-home-middle a {
    color: inherit;
    text-decoration: none;
}

.esx-home-middle img {
    max-width: 100%;
}

.esx-wrap {
    width: min(1415px, calc(100% - 50px));
    margin: 0 auto;
}

.esx-section {
    padding-top: 72px;
}

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

.esx-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.esx-section-head-main {
    min-width: 0;
}

.esx-section-heading {
    margin: 0;
    color: var(--esx-title);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.esx-section-subtitle {
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--esx-muted);
    font-size: 14px;
    line-height: 1.7;
}

.esx-section-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    color: var(--esx-black);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    transition: color .2s ease;
}

.esx-section-more:hover {
    color: var(--esx-orange);
}

.esx-section-more-arrow {
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
01. ELECTRONIC COMPONENT CATEGORIES
========================================================= */

.esx-categories-section {
    padding-top: 64px;
}

.esx-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.esx-category-card {
    position: relative;
    min-width: 0;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    padding: 25px 24px 21px;
    background: var(--esx-white);
    border: 1px solid var(--esx-border);
    border-radius: 16px;
    overflow: hidden;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.esx-category-card::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    top: -56px;
    right: -56px;
    border-radius: 50%;
    background: rgba(255, 115, 22, .055);
    pointer-events: none;
    transition:
        transform .3s ease,
        background .3s ease;
}

.esx-category-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,115,22,.32);
    box-shadow: 0 12px 30px rgba(0,0,0,.065);
}

.esx-category-card:hover::before {
    transform: scale(1.35);
    background: rgba(255,115,22,.085);
}

.esx-category-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.esx-category-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff3eb;
    color: var(--esx-orange);
    flex-shrink: 0;
}

.esx-category-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    stroke: currentColor;
}

.esx-category-arrow {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--esx-border);
    border-radius: 50%;
    color: #777d84;
    font-size: 17px;
    line-height: 1;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.esx-category-card:hover .esx-category-arrow {
    background: var(--esx-orange);
    border-color: var(--esx-orange);
    color: #ffffff;
    transform: translateX(2px);
}

.esx-category-body {
    position: relative;
    z-index: 1;
    margin-top: 22px;
}

.esx-category-name {
    margin: 0;
    color: var(--esx-title);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.15px;
}

.esx-category-name a {
    color: var(--esx-title);
    text-decoration: none;
    transition: color .2s ease;
}

.esx-category-name a:hover {
    color: var(--esx-orange);
}

.esx-category-description {
    max-width: 285px;
    margin: 7px 0 0;
    color: var(--esx-muted);
    font-size: 12px;
    line-height: 1.65;
}

.esx-category-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0f1f2;
}

.esx-category-type {
    color: #999ea4;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .1px;
}

.esx-category-browse {
    color: var(--esx-orange);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}

/* =========================================================
02. PRODUCTS
========================================================= */

.esx-products-section {
    padding-top: 82px;
}

.esx-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.esx-product-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.esx-product-tabs::-webkit-scrollbar {
    display: none;
}

.esx-product-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid var(--esx-border);
    border-radius: 20px;
    background: #ffffff;
    color: #666c72;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.esx-product-tab:hover,
.esx-product-tab.esx-active {
    background: var(--esx-orange);
    border-color: var(--esx-orange);
    color: #ffffff;
}

.esx-products-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.esx-product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--esx-border);
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.esx-product-card:hover {
    transform: translateY(-3px);
    border-color: #dedfe1;
    box-shadow: 0 10px 26px rgba(0,0,0,.065);
}

.esx-product-image-link {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
}

.esx-product-image-link img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.esx-product-card:hover .esx-product-image-link img {
    transform: scale(1.035);
}

.esx-product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 17px 17px 16px;
}

.esx-product-category {
    margin-bottom: 7px;
    color: var(--esx-orange);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.esx-product-name {
    margin: 0;
    font-size: 10px !important;
    line-height: 1.5;
    height: 30px;
    overflow: hidden;
}

.esx-product-name a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    font-size: 10px !important;
    line-height: 15px;
}

.esx-product-name a:hover {
    color: var(--esx-orange);
}

.esx-product-description {
    margin: 7px 0 0;
    color: var(--esx-muted);
    font-size: 11px;
    line-height: 1.55;
}

.esx-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
}

.esx-product-view {
    color: #666c72;
    font-size: 10px;
    font-weight: 600;
}

.esx-product-arrow {
    color: var(--esx-orange);
    font-size: 15px;
    line-height: 1;
}

/* =========================================================
03. VERIFIED ELECTRONICS SUPPLIERS
========================================================= */



/* =========================================================
FEATURED SUPPLIER PRODUCT FOCUS
只新增这一块
========================================================= */

.esx-featured-focus {
    position: relative;
    z-index: 2;
    margin-top: 25px;
}

.esx-featured-focus-title {
    margin-bottom: 11px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.esx-featured-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.esx-featured-focus-item {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.68);
    font-size: 10px;
    line-height: 1;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.esx-featured-focus-item:hover {
    border-color: rgba(255,115,22,.38);
    background: rgba(255,115,22,.10);
    color: #ffffff;
}




/* =========================================================
suppliers 
========================================================= */

.esx-sn-section,
.esx-sn-section * {
    box-sizing: border-box;
}

.esx-sn-section {
    --sn-accent: #FE7216;
    --sn-text: #20252B;
    --sn-muted: #737B84;
    --sn-soft: #F5F6F7;
    --sn-border: #E8EAED;
    --sn-radius: 18px;

    width: 100%;
    padding: 64px 0 68px;
    background: #F6F7F8;
    color: var(--sn-text);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

.esx-sn-container {
    width: min(1430px, calc(100% - 40px));
    margin: 0 auto;
    min-width: 0;
}

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

.esx-sn-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 27px;
}

.esx-sn-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.esx-sn-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: var(--sn-accent);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.esx-sn-eyebrow::before {
    content: "";
    display: block;
    flex: 0 0 23px;
    width: 23px;
    height: 2px;
    border-radius: 2px;
    background: var(--sn-accent);
}

.esx-sn-title {
    margin: 0;
    padding: 0;
    color: #202329;
    font-size: clamp(25px, 2.2vw, 32px);
    font-weight: 750;
    line-height: 1.22;
    letter-spacing: -.045em;
}

.esx-sn-subtitle {
    max-width: 690px;
    margin: 11px 0 0;
    color: var(--sn-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
}

.esx-sn-view-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid #D5D9DD;
    border-radius: 0;
    background: transparent;
    color: #30363D;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.esx-sn-view-all:hover {
    color: var(--sn-accent);
    border-color: var(--sn-accent);
}

.esx-sn-view-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform .2s ease;
}

.esx-sn-view-all:hover .esx-sn-view-arrow {
    transform: translateX(3px);
}

/* ===================== MAIN LAYOUT ===================== */

.esx-sn-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

/* ===================== FEATURED SUPPLIER ===================== */

.esx-sn-featured {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 192px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E5E8EB;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(24, 32, 40, .025);
    transition: border-color .22s ease, box-shadow .22s ease;
}

.esx-sn-featured:hover {
    border-color: #D9DDE1;
    box-shadow: 0 10px 30px rgba(24, 32, 40, .055);
}

/* Featured brand column */

.esx-sn-featured-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-width: 0;
    padding: 28px 20px;
    border-right: 1px solid #ECEEF0;
    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(254, 114, 22, .055),
            transparent 65%
        ),
        #FBFBFC;
}

.esx-sn-featured-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    height: 106px;
    flex: 0 0 auto;
    padding: 13px;
    overflow: hidden;
    border: 1px solid #E8EAEC;
    border-radius: 16px;
    background: #FFFFFF;
}

.esx-sn-featured-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.esx-sn-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #626B74;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.5;
    text-align: center;
}

.esx-sn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
    background: var(--sn-accent);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Featured main content */

.esx-sn-featured-content {
    min-width: 0;
    padding: 29px 30px 27px;
}

.esx-sn-featured-name {
    margin: 0;
    padding: 0;
    color: #202329;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.esx-sn-featured-name a,
.esx-sn-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.esx-sn-featured-name a:hover,
.esx-sn-card-name a:hover {
    color: var(--sn-accent);
}

.esx-sn-featured-description {
    max-width: 690px;
    margin: 10px 0 17px;
    color: #737B83;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

/* Trust indicators */

.esx-sn-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.esx-sn-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid #ECEEF0;
    border-radius: 6px;
    background: #FAFAFB;
    color: #69717A;
    font-size: 10px;
    line-height: 1.4;
}

.esx-sn-trust-icon {
    flex: 0 0 auto;
    color: var(--sn-accent);
    font-size: 11px;
    font-weight: 800;
}

/* Product focus */

.esx-sn-focus {
    margin-top: 21px;
}

.esx-sn-focus-title {
    margin: 0 0 10px;
    color: #9299A1;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.esx-sn-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.esx-sn-focus-item {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #F3F4F5;
    color: #606872;
    font-size: 10px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}

.esx-sn-focus-item:hover {
    background: #FFF1E7;
    color: #D95B0B;
}

/* Featured action column */

.esx-sn-featured-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 22px;
    min-width: 0;
    padding: 25px 21px;
    border-left: 1px solid #ECEEF0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
}

.esx-sn-side-note {
    margin: 0 0 13px;
    color: #9299A1;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.esx-sn-side-value {
    margin: 0;
    color: #272C32;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.025em;
}

.esx-sn-side-label {
    margin: 4px 0 0;
    color: #8B929A;
    font-size: 10px;
    line-height: 1.6;
}

.esx-sn-featured-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--sn-accent);
    border-radius: 7px;
    background: var(--sn-accent);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.esx-sn-featured-action:hover {
    border-color: #E7620C;
    background: #E7620C;
    color: #FFFFFF;
}

.esx-sn-featured-action span {
    flex: 0 0 auto;
    font-size: 15px;
}

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

.esx-sn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 15px;
    min-width: 0;
}

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

.esx-sn-card {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 16px;
    row-gap: 0;
    min-width: 0;
    min-height: 166px;
    padding: 21px;
    border: 1px solid #E7E9EC;
    border-radius: 15px;
    background: #FFFFFF;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.esx-sn-card:hover {
    transform: translateY(-2px);
    border-color: #D9DDE1;
    box-shadow: 0 10px 26px rgba(24, 32, 40, .045);
}

/* Logo */

.esx-sn-card-logo {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    padding: 9px;
    overflow: hidden;
    border: 1px solid #E9EBED;
    border-radius: 12px;
    background: #FFFFFF;
}

.esx-sn-card-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Card content */

.esx-sn-card-main {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    padding-bottom: 15px;
}

.esx-sn-card-name {
    margin: 0;
    padding: 0;
    color: #242930;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.esx-sn-card-location {
    margin: 5px 0 0;
    color: #9299A1;
    font-size: 10px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.esx-sn-card-description {
    margin: 10px 0 0;
    color: #747C84;
    font-size: 11px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Card footer remains in normal flow */

.esx-sn-card-footer {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding-top: 13px;
    border-top: 1px solid #F0F1F2;
}

.esx-sn-card-tags {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.esx-sn-card-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 7px;
    border-radius: 4px;
    background: #F4F5F6;
    color: #737B83;
    font-size: 9px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.esx-sn-card-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: #E96613;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.esx-sn-card-link:hover {
    color: #C95108;
}

.esx-sn-card-link span {
    display: inline-block;
    color: #8A9198;
    font-size: 14px;
    transition: transform .2s ease, color .2s ease;
}

.esx-sn-card:hover .esx-sn-card-link span {
    transform: translateX(3px);
    color: var(--sn-accent);
}

/* ===================== TABLET ===================== */

@media (max-width: 1100px) {
    .esx-sn-featured {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .esx-sn-featured-brand {
        padding: 24px 16px;
    }

    .esx-sn-featured-logo {
        width: 88px;
        height: 88px;
    }

    .esx-sn-featured-content {
        padding: 25px 24px;
    }

    .esx-sn-featured-side {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 17px 24px;
        border-top: 1px solid #ECEEF0;
        border-left: 0;
        background: #FBFBFC;
    }

    .esx-sn-featured-side-info {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .esx-sn-featured-side-info > div + div {
        padding-left: 12px;
        border-left: 1px solid #E6E8EA;
    }

    .esx-sn-side-note {
        margin-bottom: 3px;
    }

    .esx-sn-side-value {
        font-size: 15px;
    }

    .esx-sn-side-label {
        margin-top: 2px;
    }

    .esx-sn-featured-action {
        width: auto;
        min-width: 190px;
    }

    .esx-sn-card {
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 13px;
        padding: 17px;
    }

    .esx-sn-card-logo {
        width: 56px;
        height: 56px;
    }
}

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

@media (max-width: 760px) {
    .esx-sn-section {
        padding: 43px 0 47px;
    }

    .esx-sn-container {
        width: calc(100% - 28px);
    }

    .esx-sn-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 22px;
    }

    .esx-sn-eyebrow {
        margin-bottom: 10px;
        font-size: 9px;
    }

    .esx-sn-title {
        font-size: 25px;
        line-height: 1.3;
        letter-spacing: -.035em;
    }

    .esx-sn-subtitle {
        margin-top: 9px;
        font-size: 12px;
        line-height: 1.75;
    }

    .esx-sn-view-all {
        min-height: 30px;
        font-size: 11px;
    }

    .esx-sn-layout {
        gap: 12px;
    }

    .esx-sn-featured {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        border-radius: 15px;
    }

    .esx-sn-featured-brand {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 18px 19px;
        border-right: 0;
        border-bottom: 1px solid #ECEEF0;
        background: #FBFBFC;
    }

    .esx-sn-featured-logo {
        width: 62px;
        height: 62px;
        padding: 8px;
        border-radius: 11px;
    }

    .esx-sn-verified {
        justify-content: flex-start;
        font-size: 10px;
        text-align: left;
    }

    .esx-sn-featured-content {
        padding: 21px 19px 20px;
    }

    .esx-sn-featured-name {
        font-size: 19px;
        line-height: 1.45;
    }

    .esx-sn-featured-description {
        margin: 8px 0 14px;
        font-size: 11px;
        line-height: 1.8;
    }

    .esx-sn-trust-list {
        gap: 6px;
    }

    .esx-sn-trust-item {
        padding: 6px 8px;
        font-size: 9px;
    }

    .esx-sn-focus {
        margin-top: 18px;
    }

    .esx-sn-focus-list {
        gap: 6px;
    }

    .esx-sn-focus-item {
        min-height: 27px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .esx-sn-featured-side {
        grid-column: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 19px 18px;
        border-top: 1px solid #ECEEF0;
    }

    .esx-sn-featured-side-info {
        justify-content: flex-start;
    }

    .esx-sn-featured-action {
        width: 100%;
        min-width: 0;
        min-height: 43px;
        font-size: 11px;
    }

    .esx-sn-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .esx-sn-card {
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 13px;
        min-height: 0;
        padding: 16px;
        border-radius: 12px;
    }

    .esx-sn-card-logo {
        grid-column: 1;
        grid-row: 1;
        width: 54px;
        height: 54px;
        padding: 7px;
        border-radius: 10px;
    }

    .esx-sn-card-main {
        grid-column: 2;
        grid-row: 1;
        padding-bottom: 13px;
    }

    .esx-sn-card-name {
        font-size: 13px;
        line-height: 1.55;
    }

    .esx-sn-card-location {
        margin-top: 4px;
        font-size: 10px;
    }

    .esx-sn-card-description {
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.7;
    }

    .esx-sn-card-footer {
        grid-column: 1 / -1;
        grid-row: 2;
        align-items: center;
        gap: 9px;
        padding-top: 11px;
    }

    .esx-sn-card-tag {
        font-size: 9px;
    }

    .esx-sn-card-link {
        font-size: 10px;
    }
}

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

@media (max-width: 380px) {
    .esx-sn-container {
        width: calc(100% - 22px);
    }

    .esx-sn-title {
        font-size: 23px;
    }

    .esx-sn-featured-content {
        padding-right: 15px;
        padding-left: 15px;
    }

    .esx-sn-featured-side {
        padding-right: 15px;
        padding-left: 15px;
    }

    .esx-sn-card {
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 10px;
        padding: 13px;
    }

    .esx-sn-card-logo {
        width: 46px;
        height: 46px;
    }

    .esx-sn-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .esx-sn-card-link {
        align-self: flex-end;
    }
}

/* Respect reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
    .esx-sn-section *,
    .esx-sn-section *::before,
    .esx-sn-section *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================
FEATURED FOOTER
========================================================= */

.esx-featured-bottom {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    padding-top: 21px;
    border-top: 1px solid rgba(255,255,255,.11);
}

.esx-featured-bottom-line {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.esx-featured-stats {
    display: flex;
    align-items: center;
    gap: 30px;
}

.esx-featured-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.esx-featured-stat strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.esx-featured-stat span {
    color: rgba(255,255,255,.48);
    font-size: 10px;
}

.esx-featured-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 37px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease;
}

.esx-featured-action:hover {
    background: var(--esx-orange);
    border-color: var(--esx-orange);
}


/* =========================================================
SUPPLIER CARDS
========================================================= */

.esx-suppliers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.esx-supplier-card {
    position: relative;
    min-height: 252px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--esx-border);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.esx-supplier-card:hover {
    transform: translateY(-3px);
    border-color: #dedfe1;
    box-shadow: 0 12px 30px rgba(0,0,0,.07);
}

.esx-supplier-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.esx-supplier-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;

    background: #ffffff;
    border: 1px solid #e5e7ea;
    border-radius: 12px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.esx-supplier-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.esx-supplier-card:hover .esx-supplier-logo {
    transform: translateY(-2px);

    border-color: #d9dce0;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.esx-supplier-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 20px;
    background: #eef8f1;
    color: #258347;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.esx-supplier-verified span {
    font-size: 10px;
}

.esx-supplier-name {
    margin: 17px 0 0;
    color: var(--esx-title);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.esx-supplier-name a {
    color: var(--esx-title);
    transition: color .2s ease;
}

.esx-supplier-name a:hover {
    color: var(--esx-orange);
}

.esx-supplier-location {
    margin: 5px 0 0;
    color: #999ea4;
    font-size: 10px;
    line-height: 1.4;
}

.esx-supplier-description {
    margin: 11px 0 0;
    color: #777d84;
    font-size: 11px;
    line-height: 1.6;
}

.esx-supplier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
    padding-top: 16px;
}

.esx-supplier-tag {
    padding: 5px 7px;
    border-radius: 5px;
    background: #f6f7f8;
    color: #737980;
    font-size: 9px;
    line-height: 1;
}

.esx-supplier-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f1f2;
}

.esx-supplier-profile {
    color: var(--esx-orange);
    font-size: 10px;
    font-weight: 700;
}

.esx-supplier-arrow {
    color: #777d84;
    font-size: 15px;
    line-height: 1;
    transition: color .2s ease, transform .2s ease;
}

.esx-supplier-card:hover .esx-supplier-arrow {
    color: var(--esx-orange);
    transform: translateX(2px);
}


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

@media (max-width: 1250px) {

    .esx-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}

@media (max-width: 1050px) {

    .esx-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .esx-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .esx-suppliers-layout {
        grid-template-columns: 1fr;
    }

    .esx-featured-supplier {
        min-height: 450px;
    }

}

@media (max-width: 760px) {

    .esx-wrap {
        width: min(100% - 30px, 1415px);
    }

    .esx-section {
        padding-top: 55px;
    }

    .esx-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .esx-section-heading {
        font-size: 25px;
    }

    .esx-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .esx-category-card {
        min-height: 180px;
        padding: 21px 20px;
    }

    .esx-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .esx-product-image-link {
        height: 140px;
    }

    .esx-suppliers-grid {
        grid-template-columns: 1fr;
    }

    .esx-featured-supplier {
        padding: 27px;
    }

}

@media (max-width: 480px) {

    .esx-categories-grid {
        grid-template-columns: 1fr;
    }

    .esx-product-card:nth-child(n+7) {
        display: none;
    }

    .esx-featured-name {
        font-size: 24px;
    }

    .esx-featured-bottom-line {
        align-items: flex-start;
        flex-direction: column;
    }

}








.es-product-section{


width:100%;


}



.es-product-container{


width:1405px;


}



.es-product-title-head{


font-size:26px;


font-weight:600;


margin:0 0 25px;


color:#222;


}



/* 产品列表 */


.es-product-grid{


display:grid;


grid-template-columns:repeat(6,1fr);


gap:10px;


}



/* 产品卡片 */


.es-product-item{


background:#fff;


border-radius:8px;


overflow:hidden;


box-shadow:0 1px 8px rgba(0,0,0,.12);


transition:.25s;


}




.es-product-item:hover{


transform:translateY(-3px);


box-shadow:0 5px 18px rgba(0,0,0,.18);


}



/* 图片 */


.es-product-image{


height:220px;


width:100%;


background:#f7f7f7;


display:flex;


align-items:center;


justify-content:center;


}



.es-product-image img{


width:100%;


height:100%;


object-fit:contain;


}




/* 标题 */


.es-product-name{


margin:0;


padding:10px 12px 5px;


height:45px;


font-size:14px;


line-height:20px;


overflow:hidden;


font-weight:400;


}



.es-product-name a{


color:#333;


text-decoration:none;


}





/*价格*/


.es-product-price{


padding:5px 12px;


font-size:20px;


font-weight:bold;


color:#111;


}





.es-product-info,
.es-product-country{


padding:3px 12px;


font-size:13px;


color:#777;


}



.es-product-country{


padding-bottom:12px;


}





/*按钮*/


.es-product-more{


text-align:center;


margin-top:35px;


}



#esProductMoreBtn{


background:#1677ff;


color:#fff;


border:none;


padding:14px 50px;


border-radius:5px;


font-size:15px;


cursor:pointer;


}



#esProductMoreBtn:hover{


background:#095ec9;


}




/* =========================
响应式
========================= */


@media(max-width:1450px){


.es-product-container{


width:100%;


padding:0 20px;


}



}





@media(max-width:1200px){


.es-product-grid{


grid-template-columns:repeat(4,1fr);


}


}




@media(max-width:768px){



.es-product-container{


padding:0 10px;


}



.es-product-grid{


grid-template-columns:repeat(2,1fr);


gap:10px;


}



.es-product-image{


height:160px;


}



.es-product-name{


font-size:13px;


}



.es-product-price{


font-size:17px;


}



}




/* -------------------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;
}
.sp-link:hover{
    color:#000 !important;
}

/* 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:0px;
    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;

    /* Limit description height */
    max-height:170px;

    /* Show vertical scrollbar only when needed */
    overflow-y:auto;

    /* Keep scrollbar space stable */
    scrollbar-gutter:stable;

    /* Firefox */
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.25) transparent;
}

/* Chrome / Edge / Safari */
.spv21-desc::-webkit-scrollbar{
    width:5px;
}

.spv21-desc::-webkit-scrollbar-track{
    background:transparent;
}

.spv21-desc::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:10px;
}

.spv21-desc::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.4);
}


/* ================= SUPPLIER NEWS ================= */

 */
.spv21-news-section:not(:has(.spv21-news-card)){
    display:none;
}


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

.spv21-news-section{
    padding-top:60px;
    padding-bottom:60px;
}


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

.spv21-news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:28px;
}


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

.spv21-news-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:270px;

    padding:26px 26px 24px;

    background:#fff;

    border:1px solid #e8e8e8;

    box-sizing:border-box;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* ================= HOVER ================= */

.spv21-news-card:hover{
    border-color:#d5d5d5;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    transform:translateY(-2px);
}


/* ================= TITLE ================= */

.spv21-news-title{
    margin:0 0 12px;
    padding:0;

    font-size:19px;
    line-height:1.45;

    font-weight:600;

    min-height:55px;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
}

.spv21-news-title a{
    color:#111;
    text-decoration:none;

    transition:color .2s ease;
}

.spv21-news-title a:hover{
    color:#333;
}


/* ================= DESCRIPTION ================= */

.spv21-news-desc{
    margin:0;
    padding:0;

    font-size:14px;
    line-height:1.75;

    color:#555;

    min-height:70px;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    overflow:hidden;
}


/* ================= DATE ================= */

.spv21-news-date{
    margin-top:auto;

    padding-top:18px;

    font-size:13px;
    line-height:1.5;

    color:#999;

    border-top:1px solid #eeeeee;
}


/* ================= READ MORE ================= */

.spv21-news-more{
    display:inline-flex;
    align-items:center;

    gap:6px;

    margin-top:13px;

    font-size:13px;
    line-height:1.5;

    color:#222;

    text-decoration:none;

    font-weight:500;

    transition:color .2s ease;
}

.spv21-news-more span{
    font-size:16px;

    transition:transform .2s ease;
}

.spv21-news-more:hover{
    color:#000;
}

.spv21-news-more:hover span{
    transform:translateX(4px);
}


/* ================= TABLET ================= */

@media(max-width:992px){

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

}


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

@media(max-width:600px){

    .spv21-news-section{
        padding-top:45px;
        padding-bottom:45px;
    }

    .spv21-news-grid{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:22px;
    }

    .spv21-news-card{
        min-height:250px;
        padding:22px 20px 20px;
    }

    .spv21-news-title{
        font-size:17px;
        min-height:49px;
    }

    .spv21-news-desc{
        font-size:13px;
        min-height:auto;
    }

}


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


.spv21-meta-title{
    line-height:28px;
    white-space:nowrap;
}


/* 主营产品标签 */
.spv21-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:-2px;
}


.spv21-tag{
    display:inline-flex;
    align-items:center;
    height:26px;
    padding:0 12px;
    border-radius:15px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    font-size:13px;
    line-height:26px;
    text-decoration:none;
    transition:.3s;
}


.spv21-tag:hover{
    background:#fff;
    color:#05437D;
}
/* 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:12px;
line-height:1.6;
margin:0;
height:40px;
overflow:hidden;
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    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;}
}