/*
 * B2B sitewide visual system
 * Applies the factory-home design language to catalog, content, cart,
 * checkout and account pages while leaving the homepage untouched.
 */

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) {
    --color-main: #007aff;
    --color-main-light: #e8f2ff;
    --color-main-hover: #0062cc;
    --color-secondary: #30b0c7;
    --color-price: #007aff;
    --color-red: #ff3b30;
    --color-yellow: #007aff;
    --color-blue: #007aff;
    --color-green: #34c759;
    --color-button-primary: #007aff;
    --color-button-primary-hover: #0062cc;
    --color-button-primary-focus: #0062cc;
    --color-button-primary-active: #0062cc;
    --color-button-primary-border: #007aff;
    --color-button-primary-hover-border: #0062cc;
    --color-button-primary-focus-border: #0062cc;
    --color-button-primary-active-border: #0062cc;
    --color-button-primary-text: #ffffff;
    --color-button-primary-hover-text: #ffffff;
    --color-button-primary-focus-text: #ffffff;
    --color-button-primary-active-text: #ffffff;
    --body-bg-color: #f2f2f7;
    --border-radius-sm: 14px;
    --border-radius: 18px;
    --border-radius-lg: 24px;
    --box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
    --box-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .05);
    --box-shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 48px rgba(16, 24, 40, .08);

    --sp-blue: #007aff;
    --sp-blue-dark: #0062cc;
    --sp-blue-soft: #e8f2ff;
    --sp-ink: #1c1c1e;
    --sp-text: #3a3a3c;
    --sp-muted: #6e6e73;
    --sp-tertiary: #8e8e93;
    --sp-bg: #f2f2f7;
    --sp-surface: #ffffff;
    --sp-line: rgba(60, 60, 67, .13);
    --sp-line-strong: rgba(60, 60, 67, .22);
    --sp-danger: #ff3b30;
    --sp-success: #34c759;
    --sp-warning: #ff9f0a;
    --sp-radius-sm: 14px;
    --sp-radius: 22px;
    --sp-radius-lg: 30px;
    --sp-shell: var(--pbh-content-max, 1000px);
    --sp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);

    color: var(--sp-ink);
    background: var(--sp-bg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--sp-ink);
    font-family: inherit;
    letter-spacing: -.025em;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .customview-content .hero h1,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .customview-content .cxp-hero h1 {
    color: #fff;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) a {
    transition: color .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) a:focus-visible,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) button:focus-visible,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) input:focus-visible,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) select:focus-visible,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) textarea:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .24);
    outline-offset: 2px;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--sp-radius-sm);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-primary {
    border-color: var(--sp-blue);
    color: #fff;
    background: var(--sp-blue);
    box-shadow: 0 8px 20px rgba(0, 122, 255, .18);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-primary:hover,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-primary:focus {
    border-color: var(--sp-blue-dark);
    color: #fff;
    background: var(--sp-blue-dark);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-default,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-secondary {
    border-color: var(--sp-line);
    color: var(--sp-ink);
    background: var(--sp-surface);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-default:hover,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-secondary:hover {
    border-color: rgba(0, 122, 255, .28);
    color: var(--sp-blue);
    background: var(--sp-blue-soft);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-form-field,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-input-group .am-form-field,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) select.am-form-field,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) textarea.am-form-field {
    min-height: 44px;
    border-color: transparent;
    border-radius: var(--sp-radius-sm);
    color: var(--sp-ink);
    background: var(--sp-bg);
    box-shadow: none;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-form-field:focus,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) select.am-form-field:focus,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) textarea.am-form-field:focus {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .18), var(--box-shadow-sm);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-panel {
    border-color: var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    box-shadow: var(--box-shadow-sm);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-panel-default > .am-panel-hd {
    border-color: var(--sp-line);
    background: #fff;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-table > thead > tr > th {
    border-color: var(--sp-line);
    color: var(--sp-muted);
    background: var(--sp-bg);
    font-weight: 650;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-table > tbody > tr > td {
    border-color: var(--sp-line);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-pagination > li > a,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-pagination > li > span {
    min-width: 40px;
    height: 40px;
    margin: 0 3px;
    border-color: var(--sp-line);
    border-radius: 12px;
    color: var(--sp-text);
    background: #fff;
    line-height: 38px;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-pagination > .am-active > a,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-pagination > .am-active > span,
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-pagination > li > a:hover {
    border-color: var(--sp-blue);
    color: #fff;
    background: var(--sp-blue);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .breadcrumb-data {
    padding: 18px 0 0;
    background: transparent;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .breadcrumb-data .am-breadcrumb {
    color: var(--sp-muted);
    font-size: 12px;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .breadcrumb-data .am-breadcrumb > li + li::before {
    color: var(--sp-tertiary);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .breadcrumb-data .am-breadcrumb a {
    color: var(--sp-text);
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .breadcrumb-data .am-breadcrumb a:hover {
    color: var(--sp-blue);
}

/* Catalog pages: search and category ------------------------------------- */

.b2b-catalog-page {
    padding: 30px 0 96px;
    color: var(--sp-ink);
    background: var(--sp-bg);
}

.b2b-search-page,
.b2b-category-page {
    --catalog-accent: var(--sp-blue);
    --catalog-accent-hover: var(--sp-blue-dark);
    --catalog-ink: var(--sp-ink);
    --catalog-text: var(--sp-text);
    --catalog-muted: var(--sp-muted);
    --catalog-line: var(--sp-line);
    --catalog-soft: var(--sp-bg);
    --catalog-warm: var(--sp-blue-soft);
    --catalog-surface: var(--sp-surface);
    --catalog-radius: var(--sp-radius-sm);
    font-family: inherit;
}

.b2b-search-page .b2b-catalog-inner,
.b2b-category-page {
    max-width: var(--sp-shell);
}

.b2b-search-page #search-map .am-offcanvas-bar,
.b2b-search-page .map-base-tips,
.b2b-search-page .sort-nav,
.b2b-category-page .zero-title,
.b2b-category-page .model-one > ul,
.b2b-category-page > .category-nav,
.b2b-category-page > .category-content,
.b2b-category-page .zero-left > ul,
.b2b-category-page .zero-right {
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: var(--box-shadow-sm);
}

.b2b-search-page .map-base-tips .map-offcanvas-submit {
    border-color: rgba(0, 122, 255, .16);
    border-radius: 12px;
    color: var(--sp-blue) !important;
    background: var(--sp-blue-soft);
}

.b2b-search-page .map-item > li:first-child,
.b2b-category-page .zero-right-content,
.b2b-category-page .model-one img {
    background: var(--sp-bg);
}

.b2b-search-page .map-item .map-left {
    color: var(--sp-ink);
    background: var(--sp-bg);
}

.b2b-search-page .map-images-text-items ul > li > a:hover,
.b2b-search-page .map-text-items ul > li > a:hover,
.b2b-search-page .map-images-text-items ul > li.active > a,
.b2b-search-page .map-text-items ul > li.active > a,
.b2b-category-page .zero-right-title a:hover,
.b2b-category-page .zero-right-title a.active {
    border-color: var(--sp-blue);
    color: var(--sp-blue) !important;
    background: var(--sp-blue-soft);
}

.b2b-search-page .sort-nav li.active a {
    color: var(--sp-blue);
    box-shadow: inset 0 -3px 0 var(--sp-blue);
}

.b2b-search-page .module-goods-grid-base > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.b2b-search-page .module-goods-grid-base .item,
.b2b-search-page .module-goods-list-base .item,
.b2b-category-page .zero-right-content,
.b2b-category-page .model-one .item-content,
.b2b-category-page .category-content .two-content ul li {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.b2b-search-page .module-goods-grid-base .item:hover,
.b2b-search-page .module-goods-list-base .item:hover,
.b2b-category-page .zero-right-content:hover,
.b2b-category-page .model-one .item-content:hover,
.b2b-category-page .category-content .two-content ul li:hover {
    border-color: rgba(0, 122, 255, .24);
    background: #fff;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 42px rgba(0, 122, 255, .09);
}

.b2b-search-page .module-goods-grid-base .item .goods-info,
.b2b-search-page .module-goods-list-base .item .goods-info,
.b2b-category-page .zero-content-img a,
.b2b-category-page .model-one img {
    border-color: var(--sp-line);
    background: var(--sp-bg);
}

.b2b-search-page .module-goods-grid-base .item .price-content .price,
.b2b-search-page .module-goods-list-base .price,
.b2b-search-page .module-goods-list-base .goods-cart,
.b2b-category-page .zero-content-detail p.detail-price,
.b2b-category-page .zero-content-detail i,
.b2b-category-page .module-goods-list-base .price,
.b2b-category-page .module-goods-list-base .goods-cart {
    color: var(--sp-blue) !important;
}

.b2b-search-page .module-goods-grid-base .goods-title a,
.b2b-search-page .module-goods-list-base .goods-title a,
.b2b-category-page .zero-content-detail a.detail-title,
.b2b-category-page .model-one .item-content a,
.b2b-category-page .module-goods-list-base .goods-title a {
    color: var(--sp-ink) !important;
}

.b2b-search-page .module-goods-grid-base .goods-title a:hover,
.b2b-search-page .module-goods-list-base .goods-title a:hover,
.b2b-category-page .zero-content-detail a.detail-title:hover,
.b2b-category-page .model-one .item-content a:hover,
.b2b-category-page .module-goods-list-base .goods-title a:hover {
    color: var(--sp-blue) !important;
}

.b2b-category-page ul.category-nav li:hover,
.b2b-category-page ul.category-nav li.active {
    color: var(--sp-blue);
    background: var(--sp-blue-soft);
    box-shadow: inset 3px 0 0 var(--sp-blue);
}

.b2b-category-page .zero-title ul.am-slides li.active .zero-item > a {
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 1px var(--sp-blue);
}

.b2b-category-page .zero-title ul.am-slides li:hover p,
.b2b-category-page .zero-title ul.am-slides li.active p {
    color: var(--sp-blue);
}

.b2b-search-page .sort-nav-map-price-input input:focus,
.b2b-search-page .map-input input:focus {
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .15);
}

.b2b-search-page a:focus-visible,
.b2b-search-page button:focus-visible,
.b2b-search-page input:focus-visible,
.b2b-category-page a:focus-visible,
.b2b-category-page button:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .24);
    outline-offset: 2px;
}

/* Product detail ---------------------------------------------------------- */

.b2b-product-detail {
    --goods-accent: var(--sp-blue);
    --goods-accent-hover: var(--sp-blue-dark);
    --goods-ink: var(--sp-ink);
    --goods-text: var(--sp-text);
    --goods-muted: var(--sp-muted);
    --goods-line: var(--sp-line);
    --goods-soft: var(--sp-bg);
    --goods-warm: var(--sp-blue-soft);
    --goods-surface: var(--sp-surface);
    --goods-radius: var(--sp-radius-sm);
    padding: 30px 0 96px;
    background: var(--sp-bg);
    font-family: inherit;
}

.b2b-product-detail .item-inform,
.b2b-product-detail .introduce {
    border-color: var(--sp-line);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--box-shadow-sm);
}

.b2b-product-detail .tb-detail-hd h1 {
    color: var(--sp-ink);
    font-weight: 700;
    letter-spacing: -.04em;
}

.b2b-product-detail .tb-detail-panel-base .tb-detail-panel-top-price-content,
.b2b-product-detail .b2b-goods-inquiry {
    border-color: rgba(0, 122, 255, .18);
    border-radius: var(--sp-radius);
    background: var(--sp-blue-soft);
}

.b2b-product-detail .tb-detail-price-content .goods-sale-price,
.b2b-product-detail .tb-detail-price-content .goods-sale-price .goods-sale-price-value,
.b2b-product-detail .tb-detail-price-content .goods-sale-price .symbol {
    color: var(--sp-blue);
}

.b2b-product-detail .theme-signin-left .sku-line:hover,
.b2b-product-detail .theme-signin-left .sku-line.selected {
    border-color: var(--sp-blue);
    background: var(--sp-blue-soft);
    box-shadow: 0 0 0 1px var(--sp-blue);
}

.b2b-product-detail .theme-signin-left .sku-line:focus-within,
.b2b-product-detail a:focus-visible,
.b2b-product-detail button:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .24);
    outline-offset: 2px;
}

.b2b-product-detail .tb-booth,
.b2b-product-detail .parameters-content-base,
.b2b-product-detail .goods-base-data-content,
.b2b-product-detail .parameters-content-detail {
    border-color: var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg) !important;
}

.b2b-product-detail .tb-thumb ul.am-slides li {
    border-radius: 12px;
}

.b2b-product-detail .tb-thumb ul.am-slides .tb-selected {
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 1px var(--sp-blue);
}

.b2b-product-detail .b2b-goods-inquiry-btn,
.b2b-product-detail .introduce-main .buy-submit-top > button {
    border-color: var(--sp-blue);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-blue);
    box-shadow: 0 8px 20px rgba(0, 122, 255, .16);
}

.b2b-product-detail .b2b-goods-inquiry-btn:hover,
.b2b-product-detail .introduce-main .buy-submit-top > button:hover {
    border-color: var(--sp-blue-dark);
    background: var(--sp-blue-dark);
}

.b2b-product-detail .introduce-main ul.am-tabs-nav.am-nav.am-nav-tabs {
    border-color: var(--sp-line);
}

.b2b-product-detail .introduce-main .am-nav-tabs > li.am-active > a,
.b2b-product-detail .introduce-main .am-nav-tabs > li > a:hover {
    color: var(--sp-blue);
}

.b2b-product-detail .introduce-main .am-nav-tabs > li.am-active > a::after {
    background: var(--sp-blue);
}

.b2b-product-detail .browse .recommend-goods {
    border-color: var(--sp-line);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--box-shadow-sm);
}

.b2b-product-detail .browse .head-title {
    border-bottom-color: var(--sp-line);
    background: var(--sp-bg);
}

/* Article pages ----------------------------------------------------------- */

body.index-article-index .article-content,
body.index-article-category .article-content {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: min(var(--sp-shell), calc(100% - 48px));
    max-width: var(--sp-shell);
    margin: 30px auto 96px;
    padding: 0;
}

body.index-article-index .article-content .article-right,
body.index-article-category .article-content .article-right {
    grid-column: 2;
    grid-row: 1;
    float: none;
    left: auto;
    width: auto;
    padding: 0;
}

body.index-article-index .article-content .article-sidebar,
body.index-article-category .article-content .article-sidebar {
    grid-column: 1;
    grid-row: 1;
    float: none;
    left: auto;
    width: auto;
    padding: 0;
}

body.index-article-index .article-right > .am-background-white,
body.index-article-category .article-right > .am-background-white {
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    background: #fff;
    box-shadow: var(--box-shadow);
}

body.index-article-index .article-header .am-article-title,
body.index-article-category .article-header .am-article-title {
    margin: 0;
    color: var(--sp-ink);
    font-size: clamp(34px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: -.052em;
    line-height: 1.1;
}

body.index-article-index .article-header .am-article-meta,
body.index-article-category .article-header .am-article-meta {
    color: var(--sp-muted);
    font-size: 12px;
}

body.index-article-index .article-header .am-article-meta span + span::before {
    margin: 0 12px;
    color: var(--sp-tertiary);
    content: "/";
}

body.index-article-index .article-header .am-divider,
body.index-article-category .article-header .am-divider {
    margin: 28px 0 36px;
    border-color: var(--sp-line);
}

body.index-article-index .am-article.richtext {
    color: var(--sp-text);
    font-size: 16px;
    line-height: 1.85;
}

body.index-article-index .am-article.richtext :is(h1, h2, h3, h4) {
    margin-top: 2em;
    margin-bottom: .65em;
    color: var(--sp-ink);
    line-height: 1.3;
}

body.index-article-index .am-article.richtext h2 { font-size: 30px; }
body.index-article-index .am-article.richtext h3 { font-size: 23px; }

body.index-article-index .am-article.richtext p,
body.index-article-index .am-article.richtext ul,
body.index-article-index .am-article.richtext ol {
    margin-bottom: 1.25em;
}

body.index-article-index .am-article.richtext a {
    color: var(--sp-blue);
    text-decoration: underline;
    text-decoration-color: rgba(0, 122, 255, .28);
    text-underline-offset: 3px;
}

body.index-article-index .am-article.richtext img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sp-radius);
}

body.index-article-index .am-article.richtext blockquote {
    margin: 1.8em 0;
    padding: 18px 22px;
    border-left: 3px solid var(--sp-blue);
    border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
    color: var(--sp-text);
    background: var(--sp-blue-soft);
}

body.index-article-index .article-sidebar .am-panel,
body.index-article-category .article-sidebar .am-panel {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: var(--box-shadow-sm);
}

body.index-article-index .article-sidebar .am-panel-hd,
body.index-article-category .article-sidebar .am-panel-hd {
    border-bottom: 1px solid var(--sp-line);
    background: #fff;
}

body.index-article-index .article-sidebar .am-panel-title,
body.index-article-category .article-sidebar .am-panel-title {
    color: var(--sp-ink);
    font-size: 17px;
    font-weight: 700;
}

body.index-article-index .article-sidebar .category-list li a,
body.index-article-category .article-sidebar .category-list li a {
    display: block;
    margin: 4px 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--sp-text);
    font-size: 13px;
}

body.index-article-index .article-sidebar .category-list li a:hover,
body.index-article-index .article-sidebar .category-list li a.am-active,
body.index-article-category .article-sidebar .category-list li a:hover,
body.index-article-category .article-sidebar .category-list li a.am-active {
    color: var(--sp-blue);
    background: var(--sp-blue-soft);
}

body.index-article-index .last-next-data,
body.index-article-category .last-next-data {
    margin-top: 38px;
    padding: 22px;
    border-top: 1px solid var(--sp-line);
    border-radius: 0 0 var(--sp-radius) var(--sp-radius);
    background: var(--sp-bg);
}

body.index-article-index .last-next-data .am-nbfc,
body.index-article-category .last-next-data .am-nbfc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

body.index-article-index .last-next-data a,
body.index-article-category .last-next-data a {
    color: var(--sp-ink);
    font-weight: 650;
}

body.index-article-index .last-next-data a:hover,
body.index-article-category .last-next-data a:hover {
    color: var(--sp-blue);
}

body.index-article-category .category-content-list > li {
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-sm);
    background: #fff;
    box-shadow: none;
}

body.index-article-category .category-content-list > li:hover {
    border-color: rgba(0, 122, 255, .24);
    background: var(--sp-blue-soft);
}

body.index-article-category .category-content-list .am-list-item-hd {
    color: var(--sp-ink);
    font-weight: 650;
}

body.index-article-category .category-content-list .am-list-date {
    color: var(--sp-muted);
}

/* Cart ------------------------------------------------------------------- */

body.index-cart-index .cart-content {
    width: min(var(--sp-shell), calc(100% - 48px));
    max-width: var(--sp-shell);
    margin: 30px auto 96px;
    padding: 0;
}

body.index-cart-index .cart-content .am-container {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

body.index-cart-index .cart-table {
    padding: 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    background: #fff;
    box-shadow: var(--box-shadow);
}

body.index-cart-index .cart-content table {
    margin: 0;
    border-spacing: 0 10px;
}

body.index-cart-index .cart-content table thead th {
    padding: 8px 12px 12px;
    color: var(--sp-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
}

body.index-cart-index .cart-content table tbody tr {
    border-radius: var(--sp-radius-sm);
    background: #fff;
    box-shadow: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

body.index-cart-index .cart-content table tbody tr:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, .07);
    transform: translateY(-1px);
}

body.index-cart-index .cart-content table tbody td {
    padding-top: 16px;
    padding-bottom: 16px;
    border-color: var(--sp-line);
    background: #fff;
}

body.index-cart-index .cart-content table tbody td:first-child {
    border-left: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-sm) 0 0 var(--sp-radius-sm);
}

body.index-cart-index .cart-content table tbody td:last-child {
    border-right: 1px solid var(--sp-line);
    border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
}

body.index-cart-index .cart-content .goods-detail img,
body.index-cart-index .cart-content .goods-detail .am-radius {
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: var(--sp-bg);
}

body.index-cart-index .cart-content .goods-title {
    color: var(--sp-ink);
    font-weight: 650;
    line-height: 1.5;
}

body.index-cart-index .cart-content .goods-title:hover {
    color: var(--sp-blue);
    text-decoration: none;
}

body.index-cart-index .cart-content .goods-attr li,
body.index-cart-index .cart-content .wap-base {
    color: var(--sp-muted);
    font-size: 12px;
}

body.index-cart-index .cart-content .line-price,
body.index-cart-index .cart-content .total-price-content,
body.index-cart-index .cart-content .guest-price,
body.index-cart-index .cart-content .nav-total-price {
    color: var(--sp-blue) !important;
    font-weight: 700;
}

body.index-cart-index .cart-content .b2b-price-converted {
    color: var(--sp-tertiary);
}

body.index-cart-index .stock-tag .am-form-field,
body.index-cart-index .cart-content .am-input-group .am-form-field {
    min-height: 38px;
    border: 0;
    border-radius: 11px;
    background: var(--sp-bg);
    text-align: center;
}

body.index-cart-index .stock-tag .am-input-group-label {
    border: 0;
    border-radius: 10px;
    color: var(--sp-text);
    background: var(--sp-bg);
}

body.index-cart-index .cart-nav {
    position: sticky;
    z-index: 20;
    bottom: 16px;
    display: block;
    margin-top: 18px;
}

body.index-cart-index .cart-nav > .am-container {
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: var(--sp-radius);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 44px rgba(16, 24, 40, .12);
    backdrop-filter: saturate(180%) blur(24px);
}

body.index-cart-index .cart-nav .separate-submit {
    min-width: 152px;
    border-color: var(--sp-blue);
    color: #fff;
    background: var(--sp-blue);
    box-shadow: 0 8px 20px rgba(0, 122, 255, .18);
}

body.index-cart-index .cart-nav .separate-submit:hover {
    border-color: var(--sp-blue-dark);
    color: #fff;
    background: var(--sp-blue-dark);
}

body.index-cart-index .operation-btn a {
    color: var(--sp-muted);
    font-size: 12px;
}

body.index-cart-index .operation-btn a:hover {
    color: var(--sp-blue);
}

body.index-cart-index .mixed-tips {
    padding: 72px 32px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    background: #fff;
    box-shadow: var(--box-shadow-sm);
}

body.index-cart-index .mixed-tips-content h1 {
    color: var(--sp-ink);
    font-size: 26px;
    font-weight: 700;
}

body.index-cart-index .mixed-tips-content a {
    color: var(--sp-blue);
}
/* Checkout ---------------------------------------------------------------- */

body.index-buy-index .link-list {
    width: min(var(--sp-shell), calc(100% - 48px));
    max-width: var(--sp-shell);
    margin: 30px auto 96px;
}

body.index-buy-index .address-container {
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    background: #fff;
    box-shadow: var(--box-shadow);
}

body.index-buy-index .buy-header-nav {
    margin: 0;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--sp-line);
    background: var(--sp-bg);
}

body.index-buy-index .buy-header-nav .am-tabs-nav {
    border: 0;
}

body.index-buy-index .buy-header-nav .am-tabs-nav > li > a {
    min-height: 48px;
    border: 0;
    border-radius: 14px 14px 0 0;
    color: var(--sp-muted);
    line-height: 48px;
}

body.index-buy-index .buy-header-nav .am-tabs-nav > li.am-active > a,
body.index-buy-index .buy-header-nav .am-tabs-nav > li > a:hover {
    color: var(--sp-blue);
    background: #fff;
    box-shadow: inset 0 -3px 0 var(--sp-blue);
}

body.index-buy-index .address {
    padding: 28px;
}

body.index-buy-index .address .control h3 {
    color: var(--sp-ink);
    font-size: 20px;
    font-weight: 700;
}

body.index-buy-index .guest-address-draft {
    padding: 24px;
    border-color: var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: none;
}

body.index-buy-index .guest-address-heading {
    border-color: var(--sp-line);
}

body.index-buy-index .guest-address-draft .am-form-field:focus,
body.index-buy-index .guest-address-draft .am-input-inner:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .18);
}

body.index-buy-index .address-list {
    gap: 16px;
}

body.index-buy-index .address-cart,
body.index-buy-index ul.address-list li.address-default.address-cart {
    padding: 0 !important;
    border: 0;
    border-radius: var(--sp-radius);
    background: transparent;
    box-shadow: none;
}

body.index-buy-index .address-cart .address-content {
    min-height: 174px;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.index-buy-index .address-cart:hover .address-content {
    border-color: rgba(0, 122, 255, .24);
    box-shadow: 0 12px 30px rgba(0, 122, 255, .08);
    transform: translateY(-2px);
}

body.index-buy-index .address-cart.address-default .address-content {
    border: 2px solid var(--sp-blue);
    box-shadow: 0 12px 30px rgba(0, 122, 255, .12);
}

body.index-buy-index .address-cart.address-default .address-content::after {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    background: var(--sp-blue);
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    content: "?";
}

body.index-buy-index .address-cart .address-alias,
body.index-buy-index .address-cart .am-badge {
    border: 0;
    border-radius: 999px;
    color: var(--sp-blue);
    background: var(--sp-blue-soft);
}

body.index-buy-index .goods-group-list > .am-panel {
    margin-bottom: 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--box-shadow-sm);
}

body.index-buy-index .goods-group-list .am-panel-hd {
    padding: 18px 22px;
    border-bottom: 1px solid var(--sp-line);
    background: var(--sp-bg);
}

body.index-buy-index .goods-group-list .am-panel-bd {
    padding: 20px 22px;
}

body.index-buy-index .goods-detail img {
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: var(--sp-bg);
}

body.index-buy-index .goods-title {
    color: var(--sp-ink);
    font-weight: 650;
}

body.index-buy-index .memo-input {
    min-height: 48px;
    border-color: transparent;
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg);
}

body.index-buy-index .buy-order-nav {
    position: sticky;
    z-index: 20;
    bottom: 16px;
    margin-top: 20px !important;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--sp-radius-lg);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 44px rgba(16, 24, 40, .12);
    backdrop-filter: saturate(180%) blur(24px);
}

body.index-buy-index .buy-order-nav .box,
body.index-buy-index .buy-order-nav .base-real-pay {
    color: var(--sp-text);
}

body.index-buy-index .base-real-pay .g_price span,
body.index-buy-index .buy-order-nav .nav-total-price {
    color: var(--sp-blue) !important;
    font-weight: 700;
}

body.index-buy-index .buy-submit {
    min-width: 180px;
    min-height: 52px;
    border-radius: 15px;
    line-height: 52px;
    box-shadow: 0 10px 24px rgba(0, 122, 255, .22);
}

/* User center, order list and order detail -------------------------------- */

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-main {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: min(var(--sp-shell), calc(100% - 48px));
    max-width: var(--sp-shell);
    margin: 30px auto 96px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar {
    flex: 0 0 232px;
    float: none;
    width: 232px;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-offcanvas-bar {
    position: static;
    overflow: hidden;
    width: auto;
    padding: 12px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: var(--box-shadow-sm);
    transform: none;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list > li,
body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list > li li {
    margin: 3px 0;
    border: 0 !important;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list > li > a,
body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list > li li > a {
    padding: 11px 12px;
    border-radius: 14px;
    color: var(--sp-text);
    font-size: 13px;
    font-weight: 650;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list > li > a:hover,
body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list > li.am-active > a {
    color: var(--sp-blue);
    background: var(--sp-blue-soft);
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-sidebar-list .am-list {
    margin-top: 4px;
    padding-left: 8px;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-content {
    min-width: 0;
    padding-left: 0;
    flex: 1 1 0;
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-content-body {
    padding: clamp(24px, 4vw, 36px);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    background: #fff;
    box-shadow: var(--box-shadow);
}

body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-content-body > h1,
body:is(
    .index-user-index,
    .index-personal-index,
    .index-useraddress-index,
    .index-usergoodsbrowse-index,
    .index-usergoodsfavor-index,
    .index-usergoodscomments-index,
    .index-userintegral-index,
    .index-order-index,
    .index-order-detail,
    .index-order-comments,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .user-content-body h1 {
    margin-bottom: 24px;
    color: var(--sp-ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.2;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .am-form-table-data-list-container {
    overflow: auto;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: none;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .form-table-data-list {
    margin: 0;
    border: 0;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .form-table-data-list > thead > tr > th {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-line);
    color: var(--sp-muted);
    background: var(--sp-bg);
    font-size: 12px;
    font-weight: 700;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .form-table-data-list > tbody > tr {
    transition: background-color .18s ease;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .form-table-data-list > tbody > tr:hover {
    background: var(--sp-blue-soft);
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .form-table-data-list > tbody > tr > td {
    padding: 20px 16px;
    border-color: var(--sp-line);
    background: transparent;
    vertical-align: top;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-state {
    padding: 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-bg);
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-state .am-panel {
    margin-bottom: 14px;
    border-radius: 18px;
    box-shadow: none;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-goods > table > thead {
    background: transparent;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-goods > table > thead > tr > th:first-of-type {
    color: var(--sp-ink);
    font-weight: 700;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-goods > table > tbody > tr > td {
    border-bottom-color: var(--sp-line);
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-goods .goods-shop-info-left img {
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: var(--sp-bg);
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) :is(.order-total, .order-extension) .items-detail,
body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) :is(.items-title.am-color-main, .line-price, .am-color-main) {
    color: var(--sp-blue) !important;
}

body:is(
    .index-order-index,
    .index-orderaftersale-index,
    .index-orderaftersale-detail
) .order-total .items-detail {
    font-weight: 700;
}

body.index-order-detail ul.progress li {
    color: var(--sp-muted);
}

body.index-order-detail ul.progress li .digital {
    border-color: var(--sp-line-strong);
    background: #fff;
}

body.index-order-detail ul.progress li i.step {
    background-color: var(--sp-line);
}

body.index-order-detail ul.progress li.steps-success .digital {
    border-color: var(--sp-blue) !important;
    background: var(--sp-blue);
}

body.index-order-detail ul.progress li.steps-success i.step,
body.index-order-detail ul.progress li.steps-success + li i.step {
    background-color: var(--sp-blue);
}

body.index-order-detail ul.progress li.steps-success + li .digital {
    border-color: var(--sp-blue);
}

body.index-order-detail ul.progress li.steps-success + li .base .title {
    color: var(--sp-blue);
}

body.index-order-detail .user-content .am-panel-default > .am-panel-hd {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-sm) var(--sp-radius-sm) 0 0;
    color: var(--sp-ink);
    background: var(--sp-bg);
    font-weight: 700;
}

body.index-order-detail .user-content .am-panel-bd {
    padding: 22px;
}

body.index-order-detail .order-state .am-alert-primary {
    color: var(--sp-blue);
    background: var(--sp-blue-soft);
}

body.index-order-detail .order-express table tr th,
body.index-order-detail .order-express table tr td {
    border-color: var(--sp-line);
}

body.index-order-detail .shop-aftersale-info,
body.index-orderaftersale-detail .shop-aftersale-info {
    padding: 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg);
}

/* Shared empty/not-data states ------------------------------------------- */

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) :is(.table-no, .form-table-no-data, .not-data) {
    padding: 64px 24px;
    color: var(--sp-muted);
    text-align: center;
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) :is(.table-no, .form-table-no-data, .not-data) i {
    color: var(--sp-tertiary);
}

/* Responsive -------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {
    .b2b-search-page .module-goods-grid-base > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .b2b-category-page .model-one > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 1024px) {
    .b2b-search-page,
    .b2b-category-page,
    .b2b-product-detail {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.index-article-index .article-content,
    body.index-article-category .article-content {
        grid-template-columns: 1fr;
        width: calc(100% - 40px);
        gap: 18px;
    }

    body.index-article-index .article-content .article-right,
    body.index-article-category .article-content .article-right {
        grid-column: 1;
        grid-row: 1;
    }

    body.index-article-index .article-content .article-sidebar,
    body.index-article-category .article-content .article-sidebar {
        grid-column: 1;
        grid-row: 2;
    }

    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-main {
        display: block;
        width: calc(100% - 40px);
    }

    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-sidebar {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .b2b-catalog-page {
        padding: 22px 0 80px;
    }

    .b2b-search-page,
    .b2b-category-page,
    .b2b-product-detail {
        padding-right: 16px;
        padding-left: 16px;
    }

    .b2b-search-page .module-goods-grid-base > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .b2b-search-page .module-goods-grid-base .item {
        min-height: 0;
    }

    .b2b-product-detail .item-inform,
    .b2b-product-detail .introduce {
        border-radius: var(--sp-radius);
    }

    .b2b-product-detail .item-inform {
        padding: 18px;
    }

    body.index-article-index .article-content,
    body.index-article-category .article-content {
        width: calc(100% - 32px);
        margin-top: 20px;
        margin-bottom: 80px;
    }

    body.index-article-index .article-right > .am-background-white,
    body.index-article-category .article-right > .am-background-white {
        padding: 24px 20px;
        border-radius: var(--sp-radius);
    }

    body.index-article-index .article-header .am-article-title,
    body.index-article-category .article-header .am-article-title {
        font-size: 34px;
    }

    body.index-article-index .am-article.richtext {
        font-size: 15px;
    }

    body.index-cart-index .cart-content {
        width: calc(100% - 32px);
        margin-top: 20px;
        margin-bottom: 80px;
    }

    body.index-cart-index .cart-table {
        padding: 10px;
        border-radius: var(--sp-radius);
    }

    body.index-cart-index .cart-content table {
        border-spacing: 0 8px;
    }

    body.index-cart-index .cart-nav {
        bottom: 10px;
    }

    body.index-cart-index .cart-nav > .am-container {
        padding: 14px;
    }

    body.index-buy-index .link-list {
        width: calc(100% - 32px);
        margin-top: 20px;
        margin-bottom: 80px;
    }

    body.index-buy-index .address {
        padding: 20px 16px;
    }

    body.index-buy-index .address-cart .address-content {
        min-height: 0;
    }

    body.index-buy-index .buy-order-nav {
        bottom: 10px;
        padding: 16px;
    }

    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-main {
        width: calc(100% - 32px);
        margin-top: 20px;
        margin-bottom: 80px;
    }

    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-content-body {
        padding: 22px 16px;
        border-radius: var(--sp-radius);
    }

    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-content-body > h1,
    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-content-body h1 {
        font-size: 25px;
    }

    body.index-order-detail ul.progress {
        margin-top: 24px;
    }

    body.index-order-detail .user-content .am-panel-bd {
        padding: 16px;
    }
}

@media only screen and (max-width: 479px) {
    .b2b-search-page .module-goods-grid-base > ul {
        grid-template-columns: 1fr;
    }

    .b2b-category-page .model-one > ul {
        grid-template-columns: 1fr;
    }

    body.index-cart-index .cart-nav .separate-submit {
        width: 100%;
    }

    body.index-buy-index .buy-submit {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) *,
    body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) *::before,
    body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-xs {
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
}
body:not(.index-index-index):not(.index-design-index):not(.index-dev-index) .am-btn-sm {
    min-height: 38px;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.2;
}
@media only screen and (max-width: 640px) {
    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-sidebar {
        width: inherit;
        float: left;
        flex: none;
    }
    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-offcanvas-bar {
        position: absolute;
        width: 270px;
        overflow-y: auto;
        transform: translateX(-100%);
    }
    body:is(
        .index-user-index,
        .index-personal-index,
        .index-useraddress-index,
        .index-usergoodsbrowse-index,
        .index-usergoodsfavor-index,
        .index-usergoodscomments-index,
        .index-userintegral-index,
        .index-order-index,
        .index-order-detail,
        .index-order-comments,
        .index-orderaftersale-index,
        .index-orderaftersale-detail
    ) .user-offcanvas-bar.am-active {
        transform: translateX(0);
    }
}

/* Dynamic product grids: 4 / 3 / 2 / 1 columns */
.customview-content .gxp-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
.customview-content .gxp-product-card{display:flex;height:100%;min-width:0;overflow:hidden;border:1px solid rgba(60,60,67,.08);border-radius:24px;background:#fff;box-shadow:0 14px 38px rgba(16,24,40,.08);flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.customview-content .gxp-product-card:hover{transform:translateY(-4px);border-color:rgba(0,122,255,.16);box-shadow:0 22px 48px rgba(16,24,40,.13)}
.customview-content .gxp-product-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#eef0f4}
.customview-content .gxp-product-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.customview-content .gxp-product-card:hover .gxp-product-media img{transform:scale(1.05)}
.customview-content .gxp-product-body{display:flex;flex:1;min-width:0;padding:18px 18px 20px;flex-direction:column;gap:10px}
.customview-content .gxp-product-body h3{display:-webkit-box;overflow:hidden;min-height:44px;font-size:16px;font-weight:700;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.customview-content .gxp-product-body h3 a{color:#1c1c1e;text-decoration:none}
.customview-content .gxp-product-body>p{display:-webkit-box;overflow:hidden;min-height:34px;color:#6e6e73;font-size:12px;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.customview-content .gxp-product-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.customview-content .gxp-product-meta div{padding:9px 10px;border-radius:12px;background:#f6f6f8}
.customview-content .gxp-product-meta dt{color:#8e8e93;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.customview-content .gxp-product-meta dd{margin-top:3px;color:#1c1c1e;font-size:12px;font-weight:700;overflow-wrap:anywhere}
.customview-content .gxp-product-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;padding:10px 12px;border-radius:12px;color:#007aff;background:rgba(0,122,255,.08);font-size:12px;font-weight:700;text-decoration:none}
.customview-content .gxp-product-link:hover{color:#fff;background:#007aff}
@media (max-width:1180px){.customview-content .gxp-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.customview-content .gxp-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:540px){.customview-content .gxp-product-grid{grid-template-columns:1fr}.customview-content .gxp-product-body{padding:16px}}


/* Blog list and article detail ------------------------------------------- */

body .article-listing.blog-listing {
    display: block;
    width: min(var(--sp-shell), calc(100% - 48px));
    max-width: var(--sp-shell);
    margin: 0 auto 96px;
    padding: 0;
}

.blog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 28px 48px;
    align-items: end;
    margin: 24px 0 30px;
    padding: clamp(34px, 5vw, 64px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 8%, rgba(93, 188, 255, .32), transparent 30%),
        linear-gradient(135deg, #101d33 0%, #0c4d91 58%, #007aff 100%);
    box-shadow: var(--box-shadow-lg);
}

.blog-hero-copy h1 {
    max-width: 850px;
    margin: 12px 0 16px;
    color: #fff !important;
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.blog-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 16px;
    line-height: 1.75;
}

.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9dd6ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.blog-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
}

.blog-search input {
    min-width: 0;
    height: 54px;
    padding: 0 18px;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
}

.blog-search input::placeholder { color: rgba(255, 255, 255, .62); }
.blog-search button {
    height: 54px;
    padding: 0 20px;
    border: 0;
    color: #092446;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}
.blog-search button i { margin-right: 7px; }

.blog-topic-nav {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.blog-topic-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 0 9px;
    border: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, .72) !important;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .2s ease;
}
.blog-topic-nav a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.blog-topic-nav a:hover,
.blog-topic-nav a.is-active {
    color: #fff !important;
    background: transparent;
}
.blog-topic-nav a:hover::after,
.blog-topic-nav a.is-active::after {
    transform: scaleX(1);
}

.blog-results { margin-top: 34px; }
.blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.blog-toolbar p { margin: 0; color: var(--sp-muted); font-size: 14px; }
.blog-toolbar p strong { color: var(--sp-ink); font-size: 18px; }
.blog-sort { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #e9edf2; }
.blog-sort a { padding: 7px 12px; border-radius: 9px; color: var(--sp-muted); font-size: 13px; font-weight: 650; }
.blog-sort a.is-active { color: var(--sp-ink); background: #fff; box-shadow: 0 1px 4px rgba(16, 24, 40, .09); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.blog-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--sp-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--box-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover {
    border-color: rgba(0, 122, 255, .24);
    box-shadow: var(--box-shadow);
    transform: translateY(-4px);
}
.blog-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #eaf3ff, #dbe9f8);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.035); }
.blog-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #8fb5df; font-size: 44px; }
.blog-featured-label {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 122, 255, .92);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.blog-card-category {
    align-self: flex-start;
    margin-bottom: 10px;
    color: var(--sp-blue);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.blog-card h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.32; }
.blog-card h2 a { color: var(--sp-ink); }
.blog-card h2 a:hover { color: var(--sp-blue); }
.blog-card-body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--sp-muted);
    font-size: 14px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--sp-muted);
    font-size: 12px;
}
.blog-read-more { margin-top: 14px; color: var(--sp-blue); font-size: 13px; font-weight: 700; }
.blog-read-more i { margin-left: 4px; transition: transform .2s ease; }
.blog-read-more:hover i { transform: translateX(3px); }
.blog-card-featured { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
.blog-grid-single .blog-card-featured { grid-column: 1 / -1; }
.blog-card-featured .blog-card-media { height: 100%; min-height: 330px; aspect-ratio: auto; }
.blog-card-featured .blog-card-body { justify-content: center; padding: clamp(24px, 4vw, 42px); }
.blog-card-featured h2 { font-size: clamp(28px, 3.3vw, 42px); }
.blog-card-featured .blog-card-body > p { -webkit-line-clamp: 4; font-size: 15px; }
.blog-pagination { margin-top: 30px; text-align: center; }
.blog-empty { padding: 76px 24px; border: 1px dashed #d9dee7; border-radius: 24px; text-align: center; background: #fff; }
.blog-empty > i { color: #a8bfd9; font-size: 52px; }
.blog-empty h2 { margin: 14px 0 8px; color: var(--sp-ink); }
.blog-empty p { margin: 0 0 22px; color: var(--sp-muted); }

body.index-article-index .blog-article-detail.article-content,
body.index-article-blogdetail .blog-article-detail.article-content {
    grid-template-columns: minmax(0, 1fr) 290px;
}
.blog-article-detail .blog-article-main { grid-column: 1; grid-row: 1; }
.blog-article-detail .article-sidebar { grid-column: 2; grid-row: 1; }
.blog-article-card {
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--box-shadow);
}
.blog-article-header { padding: clamp(30px, 5vw, 64px) clamp(24px, 6vw, 76px) 0; text-align: left; }
.blog-article-header .am-article-title { font-size: clamp(34px, 4.5vw, 58px); line-height: 1.08; }
.blog-article-category { display: inline-flex; margin-bottom: 14px; color: var(--sp-blue); font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.blog-article-header .am-article-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; color: var(--sp-muted); }
.blog-article-header .am-article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-article-cover { margin: 34px clamp(24px, 6vw, 76px) 0; }
.blog-article-cover img { width: 100%; max-height: 620px; border-radius: 18px; object-fit: cover; }
.blog-article-content { padding: 42px clamp(24px, 6vw, 76px) 24px; font-size: 17px; line-height: 1.9; }
.blog-article-content img { height: auto; }
.blog-article-content table { width: 100%; }
.blog-article-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 42px clamp(24px, 6vw, 76px) clamp(30px, 5vw, 56px);
    padding: 28px 30px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #11223d, #0069d9);
}
.blog-article-cta h2 { margin: 5px 0 8px; color: #fff !important; font-size: 24px; }
.blog-article-cta p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.65; }
.blog-cta-kicker { color: #9dd6ff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blog-article-cta .am-btn { flex: 0 0 auto; color: #0c315b; background: #fff; }
.blog-related { margin-top: 36px; }
.blog-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.blog-section-heading h2 { margin: 0; color: var(--sp-ink); font-size: 24px; }
.blog-section-heading a { color: var(--sp-blue); font-size: 13px; font-weight: 650; }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.blog-related-card { overflow: hidden; border: 1px solid var(--sp-line); border-radius: 18px; background: #fff; box-shadow: var(--box-shadow-sm); }
.blog-related-card > a { display: flex; min-height: 100%; flex-direction: column; }
.blog-related-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-related-card div { padding: 16px; }
.blog-related-card h3 { margin: 0 0 8px; color: var(--sp-ink); font-size: 16px; line-height: 1.4; }
.blog-related-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--sp-muted); font-size: 13px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; padding: 0; border: 0; background: transparent; }
.blog-prev-next > a { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 18px 20px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fff; }
.blog-prev-next span { color: var(--sp-muted); font-size: 12px; }
.blog-prev-next strong { overflow: hidden; color: var(--sp-ink); text-overflow: ellipsis; white-space: nowrap; }
.recommended-list li a { padding: 11px 14px !important; font-size: 13px; line-height: 1.5; }

@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-card-featured { grid-column: span 2; }
    body.index-article-index .blog-article-detail.article-content,
    body.index-article-blogdetail .blog-article-detail.article-content { grid-template-columns: minmax(0, 1fr); }
    .blog-article-detail .blog-article-main,
    .blog-article-detail .article-sidebar { grid-column: 1; grid-row: auto; }
    .blog-article-detail .article-sidebar { display: none; }
}

@media (max-width: 768px) {
    body .article-listing.blog-listing { width: min(100% - 28px, var(--sp-shell)); margin-bottom: 64px; }
    .blog-hero { grid-template-columns: 1fr; padding: 30px 22px; border-radius: 22px; }
    .blog-hero-copy h1 { font-size: 38px; }
    .blog-search { grid-template-columns: 1fr; border-radius: 14px; }
    .blog-search button { width: 100%; }
    .blog-toolbar { align-items: flex-start; flex-direction: column; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card-featured { grid-column: auto; display: flex; }
    .blog-card-featured .blog-card-media { min-height: 0; aspect-ratio: 16 / 10; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .blog-article-header { padding: 28px 20px 0; }
    .blog-article-header .am-article-title { font-size: 34px; }
    .blog-article-cover { margin: 24px 20px 0; }
    .blog-article-content { padding: 28px 20px 18px; font-size: 16px; }
    .blog-article-cta { align-items: flex-start; flex-direction: column; margin: 30px 20px; padding: 22px; }
    .blog-prev-next { grid-template-columns: 1fr; }
}