@charset "utf-8";

body {
    background: #FFFFFF !important;
}

.main-content {
    max-width: clamp(1380px, 100vw, 1380px);
    width: 100%;
    margin-right: auto;
    padding: 0 clamp(2px, 0.8vw, 12px);
    box-sizing: border-box;
}

.Blog-Details {
    display: flex;
    justify-content: space-between;
    column-gap: clamp(16px, 2vw, 28px);
    align-items: flex-start;
}

.Blog-Details-left {
    flex: 0 0 clamp(288px, 18vw, 288px);
    width: clamp(288px, 18vw, 288px);
    position: sticky;
    top: 90px;
    margin-right: 0;
    border: 1.5px solid #F5F5F5;
    border-radius: 4px;
    background: #fff;
    transition: flex 0.5s;
}

.toc-heading {
    font-weight: 700;
    font-size: 16px;
    color: #2F2F2F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 73px;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: solid 5px #EE7115;
}

.toc-heading .blog_toc_title img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 6px 0 0;
}

.Blog-Details-box {
    border-radius: 8px;
    background: #fff;
    padding: 14px 0 30px 0;
    width: 100%;
    transition: width 0.5s;
}

.Blog-Details-box .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.Blog-Details-box .toc-item {
    margin-bottom: 4px;
}

.Blog-Details-box .toc-title {
    height: 54px;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    transition: all 0.2s;
    position: relative;
}

.Blog-Details-box .toc-title:hover {
    background: #FFF8F3;
}

.Blog-Details-left span.active {
    background: #FFF8F3;
}

.Blog-Details-box .toc-title .toc-link {
    padding: 6px 14px;
    height: 100%;
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.Blog-Details-box .toc-title .toc-link>span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 24px;

}

/* 左边折叠 */
.Blog-Details-left.classExpand {
    flex: 0 0 clamp(84px, 84px, 84px);
}

.Blog-Details-left.classExpand .Blog-Details-box {
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
}

.Blog-Details-left.classExpand .blog_toc_title {
    display: none;
}

.Blog-Details-left .toc-heading .expand {
    transition: transform 0.2s;
    /* 设置过渡效果，持续时间为1秒 */
}

.Blog-Details-left.classExpand .toc-heading .expand {
    transform: rotate(180deg);
    /* 鼠标悬停时旋转180度 */
}

.Blog-Details-left.classExpand .toc-heading {
    width: 56px;
    margin: 0 14px;
    justify-content: center;
}

.Blog-Details-box .toc-toggle {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-left: 1.5px solid #FF5E17;
    border-bottom: 1.5px solid #FF5E17;
    transform: rotate(-45deg);
    transition: transform .15s ease;
    position: absolute;
    left: 1.34px;
    top: 21.345px;
    cursor: pointer;
}

.Blog-Details-box .toc-toggle.open {
    transform: rotate(135deg);
    margin-top: 2px;
}

.Blog-Details-box .toc-children {
    padding: 4px 0 4px 24px;
    list-style: none;
    display: none;
}

.Blog-Details-box .toc-sub-item {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    padding: 4px 0;
}

.Blog-Details-box .toc-sub-item .toc-link:hover {
    background: #FFF8F3 !important;
}


.Blogarticle {
    flex: 1 1 auto;
    min-width: 0;
    max-width: clamp(720px, 62vw, 1020px);
    margin-right: clamp(22px, 2.4vw, 36px);
}

.Blogarticle .Blogarticle-title {
    padding-bottom: 35px;
}

.Blogarticle .Blogarticle-title h2 {
    font-weight: 700;
    color: #151515;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.Blogarticle .Blogarticle-title .article-title {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    font-weight: 800;
    font-size: 28px;
    line-height: 44px;
    margin-bottom: 24px;
}

.Blogarticle .Blogarticle-title .author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: #F5F5F5 2px solid;
}

.Blogarticle .Blogarticle-title .author .author-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.Blogarticle .Blogarticle-title .author .author-left .author-image img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.Blogarticle .Blogarticle-title .author-text .author-name {
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-bottom: 8px;
}

.Blogarticle .Blogarticle-title .author-text p {
    font-size: 14px;
    line-height: 17px;
    color: #90949A;
}

.Blogarticle .author-right .blog-share-container .blog-share-menu {
    display: flex;
    justify-content: right;
    gap: 6px;
}

.Blogarticle .author-right .blog-share-container .blog-share-menu .blog-share-item {
    width: 25px;
    height: 25px;
}

.Blogarticle .author-right .blog-share-container .blog-share-menu .blog-share-item img {
    width: 100%;
    height: 100%;
}

.Blogarticle .author-right>ul {
    display: flex;
    justify-content: right;
    padding-top: 16px;
    gap: 4px;
}

.Blogarticle .author-right>ul li {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    gap: 4px;
    color: #90949A;
}

.Blogarticle .author-right>ul li img {
    display: block;
    margin: 0;
    width: 20px;
    height: 20px;
}

@media (max-width: 950px) {
    .Blogarticle .Blogarticle-title {
        padding-bottom: 0.2rem;
    }

    .Blogarticle .Blogarticle-title h2 {
        font-size: 0.2rem;
        line-height: 1.5;
        margin-bottom: 0.2rem;
    }

    .Blogarticle .Blogarticle-title .article-title {
        font-size: 0.28rem;
        line-height: 0.44rem;
        margin-bottom: 0.2rem;
    }

    .Blogarticle .Blogarticle-title .author {
        gap: 12px;
        padding-bottom: 16px;
        border-bottom: #F5F5F5 2px solid;
    }

    .Blogarticle .Blogarticle-title .author .author-left {
        gap: 12px;
    }

    .Blogarticle .Blogarticle-title .author .author-left .author-image img {
        width: 0.64rem;
        height: 0.64rem;
    }

    .Blogarticle .Blogarticle-title .author-text .author-name {
        font-size: 0.2rem;
        line-height: 0.24rem;
        margin-bottom: 0.11rem;
    }

    .Blogarticle .Blogarticle-title .author-text p {
        font-size: 0.2rem;
        line-height: 0.24rem;
    }

    .Blogarticle .author-right .blog-share-container .blog-share-menu {
        display: flex;
        justify-content: right;
        gap: 6px;
    }

    .Blogarticle .author-right .blog-share-container .blog-share-menu .blog-share-item {
        width: 25px;
        height: 25px;
    }

    .Blogarticle .author-right .blog-share-container .blog-share-menu .blog-share-item img {
        width: 100%;
        height: 100%;
    }

    .Blogarticle .author-right>ul {
        padding-top: 0.11rem;
        gap: 0.24rem;
    }

    .Blogarticle .author-right>ul li {
        font-size: 0.2rem;
        line-height: 0.24rem;
        gap: 0.02rem;
    }

    .Blogarticle .author-right>ul li img {
        width: 0.2rem;
        height: 0.2rem;
    }
}




.remmeTitle h1 {
    font-weight: 700;
    color: #000000;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 25px;
}



.author-right ul {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: nowrap;
}

.author-right li {
    font-size: 13px;
    color: #000000;
}

.author-right li img {
    display: inline-block;
    vertical-align: middle;
    margin: -5px 8px 0 0;
}

.Blogarticle-box h2 {
    font-weight: 700;
    font-size: 18px;
    color: #2F2F2F;
    margin: 20px 0;
    line-height: 1.6;
}

.Blogarticle-box p {
    font-size: 12px;
    color: #2F2F2F;
    line-height: 1.6;
    margin-bottom: 30px;
}

.Blogarticle-box img {
    max-width: 100%;
    margin: 0 auto;
}

/* Typography for Rich Text Content */
.Blogarticle-content {
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2b2b2b;
    line-height: 1.7;
    font-size: 14px;
    word-break: break-word;
    overflow: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
}

.Blogarticle-content :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    line-height: 1.4;
    margin: 1.2em 0 0.6em;
    color: #1a1a1a;
}

.Blogarticle-content :where(h1) {
    font-size: 2em;
}

.Blogarticle-content :where(h2) {
    font-size: 1.5em;
}

.Blogarticle-content :where(h2.rt-h1) {
    font-size: 2em;
}

.Blogarticle-content :where(h3) {
    font-size: 1.25em;
}

.Blogarticle-content :where(h4) {
    font-size: 1.1em;
}

.Blogarticle-content :where(h5) {
    font-size: 1em;
}

.Blogarticle-content :where(h6) {
    font-size: 0.95em;
}

.Blogarticle-content :where(p) {
    margin: 0 0 1em;
}

.Blogarticle-content :where(ul, ol) {
    margin: 0 0 1em 1.5em;
    padding: 0;
    list-style-position: outside;
}

.Blogarticle-content :where(ul) {
    list-style-type: disc;
}

.Blogarticle-content :where(ul ul) {
    list-style-type: circle;
}

.Blogarticle-content :where(li) {
    margin: 0.4em 0;
}

.Blogarticle-content :where(strong, b) {
    font-weight: 700;
}

.Blogarticle-content :where(em, i) {
    font-style: var(--font-Italic);
}

.Blogarticle-content :where(a) {
    color: #1a73e8;
    text-decoration: none;
}

.Blogarticle-content .js-brand-buy-now {
    color: inherit;
    /* 继承父元素文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
}

.Blogarticle-content :where(a:hover) {
    text-decoration: underline;
}


.Blogarticle-content :where(iframe, video) {
    max-width: 100% !important;
    width: 100% !important;
}

.Blogarticle-content :where(blockquote) {
    margin: 0 0 1em;
    padding: 0.8em 1em;
    background: #f7f7f7;
    border-left: 4px solid #e0e0e0;
    color: #555;
}

/* 富文本提示框样式（后台“提示框”格式） */
.Blogarticle-content .rt-callout {
    margin: 0 0 1em;
    padding: 16px 18px;
    background: #F7FAFC;
    border-left: 4px solid #c6c9cf;
    border-radius: 6px;
    color: #2b2b2b;
}

.Blogarticle-content .rt-callout p {
    margin: 0;
    line-height: 1.7;
}

.Blogarticle-content .rt-callout a {
    color: #0b63ff;
    text-decoration: underline;
}

.Blogarticle-content :where(pre) {
    margin: 0 0 1em;
    padding: 12px 14px;
    background: #f6f8fa;
    border-radius: 6px;
    overflow: auto;
    font-size: 0.95em;
    line-height: 1.6;
}

.Blogarticle-content :where(code) {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #f2f4f7;
    padding: 2px 4px;
    border-radius: 4px;
}

.Blogarticle-content :where(pre code) {
    background: transparent;
    padding: 0;
}

.Blogarticle-content :where(hr) {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 1.5em 0;
}

/* Table Styles - 适配富文本内嵌容器 */
.Blogarticle-content :where(table) {
    width: auto;
    max-width: none;
    border-collapse: collapse;
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
    box-sizing: border-box;
    table-layout: auto;
}

.Blogarticle-content :where(table th, table td) {
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    vertical-align: top;
}

.Blogarticle-content :where(table th) {
    font-weight: 700;
    background: #fafafa;
}

/* 表格滚动容器：锁定外层，内部横向滑动 */
.Blogarticle-content .rt-table-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin: 1.2em 0;
    padding-bottom: 10px;
}

.Blogarticle-content .rt-table-scroll table {
    width: auto;
    max-width: none;
    min-width: 520px;
    margin: 0;
}

.Blogarticle-content .rt-table-scroll::-webkit-scrollbar {
    height: 8px;
}

.Blogarticle-content .rt-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* 表格内图片自适应，避免溢出 */
.Blogarticle-content :where(table td img) {
    max-width: 100%;
    height: auto;
}

@media (max-width: 950px) {

    /* 移动端：外层不横向滚动，表格在容器内滑动 */
    .Blogarticle-content {
        overflow-x: hidden;
    }

    .Blogarticle-content .rt-table-scroll {
        margin: 1em 0;
    }

    .Blogarticle-content .rt-table-scroll table {
        min-width: 480px;
    }
}

/* 如果表格单元格内包含业务组件，则取消该单元格的内边距，防止样式冲突 */
.Blogarticle-content table td:has(.ArticleProductsWrap),
.Blogarticle-content table td:has(.Choose-content) {
    padding: 0 !important;
    border: none !important;
}

/* Rich text lists/tables scoped to content area only, exclude injected components */

/* 列表：仅正文，圆点/圆圈 */
.Blogarticle-content :where(ul):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    list-style-type: disc;
    list-style-position: outside;
    margin: 0 0 1em 1.5em;
    padding-left: 0;
}

.Blogarticle-content :where(ul ul):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    list-style-type: circle;
}

.Blogarticle-content :where(ul ul ul):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    list-style-type: square;
}

.Blogarticle-content :where(ol):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    list-style-type: decimal;
    list-style-position: outside;
    margin: 0 0 1em 1.5em;
    padding-left: 0;
}

.Blogarticle-content :where(ol ol):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    list-style-type: lower-alpha;
}

.Blogarticle-content :where(ol ol ol):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    list-style-type: lower-roman;
}

.Blogarticle-content :where(li):not(:where(.ArticleProductsWrap *)):not(:where(.Choose-content *)) {
    margin: 0.4em 0;
    display: list-item;
    list-style-position: inherit;
    list-style-type: inherit;
}

/* 移除重复表格定义，统一使用上方表格样式与容器滚动 */

.Blog-Details-right {
    --right-col-w: clamp(220px, 22vw, 288px);
    flex: 0 0 var(--right-col-w);
    width: var(--right-col-w);
    position: sticky;
    top: 90px;
}

.Related {
    border-radius: 8px;
    background: #fff;
    padding: 0 clamp(12px, 4cqw, 15px) clamp(12px, 4cqw, 15px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.related-title {
    font-weight: 700;
    font-size: clamp(14px, 4.2cqw, 16px);
    color: #2F2F2F;
    padding: clamp(8px, 3cqw, 10px) 0;
}

.related-title img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px clamp(4px, 1.6cqw, 6px) 0 0;
}

.related-title b {
    line-height: clamp(16px, 4cqw, 18px);
    display: inline-block;
    padding: 0 clamp(6px, 2.4cqw, 8px);
    border-radius: 5px;
    font-weight: 400;
    font-size: clamp(9px, 2.2cqw, 10px);
    color: #202020;
    background-image: linear-gradient(to right, #a4f22d, #73e954);
}

.Related-box {
    border-radius: 6px;
    padding: clamp(10px, 4cqw, 14px) clamp(12px, 4.6cqw, 20px);
    background: #ecf9ff;
    display: flex;
    justify-content: space-between;
    gap: clamp(8px, 3cqw, 16px);
}

.Related-image {
    width: clamp(68px, 28cqw, 112px);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

.Related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.Related-text {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.related-product-name {
    font-weight: 700;
    line-height: 1.5;
    color: #151515;
    font-size: clamp(13px, 1.1vw, 16px);
}

.Related-text p {
    font-size: clamp(11px, 0.95vw, 12px);
    display: flex;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.Related-text p span {
    font-weight: 700;
    color: #FF5E17;
}

.Related-text p b {
    color: #626262;
    font-weight: 700;
}

.Related-b:before {
    position: absolute;
    content: "";
    background-size: 100% 100%;
    top: 0;
    right: 0;
}

.recent-title {
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    padding: 20px 0 15px;
}

.recent-title img {
    display: inline-block;
    vertical-align: middle;
    margin: -4px 8px 0 0;
}

.Related-box-a {
    background-image: linear-gradient(to right, #defafe, #fdf6d9);
}

.Recent-content {
    border-radius: 8px;
    background: #fff;
    padding: 10px 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    max-height: calc(100vh - 530px);
    overflow: auto;
    scrollbar-width: thin;
}


.Recent-content li {
    padding: 20px 0;
}

.Recent-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Recent-image {
    width: clamp(96px, 9vw, 130px);
    aspect-ratio: 130 / 90;
    overflow: hidden;
    border-radius: 8px;
    flex: 0 0 auto;
}

.Recent-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s;
}

.Recent-text {
    width: calc(100% - clamp(110px, 9.6vw, 145px));
    min-width: 0;
}

.recent-item-title {
    font-weight: 700;
    line-height: 1.5;
    color: #2C2B2A;
    font-size: clamp(12px, 1.05vw, 14px);
}

.Recent-text p {
    color: #555555;
    font-size: clamp(11px, 0.95vw, 12px);
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.Recent-text p img {
    display: inline-block;
    vertical-align: middle;
    margin: -1px 5px 0 0;
    width: 8px;
}

.author-card {
    margin-top: 30px;
    border: 1px solid #EE7115;
    border-radius: 8px;
    background: #fff;
    padding: 24px 24px 16px 24px;
    position: relative;
}

.author-card .author-card-avatar {
    display: flex;
    align-items: center;
    width: 290px;
    height: 39px;
    padding-left: 80px;
    background: #ff7a1a;
    clip-path: polygon(0% 0%, 78% 0%, 100% 100%, 0% 100%);
    position: absolute;
    left: -1px;
    top: -24px;
    overflow: visible;
}

.author-card .default-author {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    left: 18px;
    top: -36px;
}

.author-card-name {
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
}

.author-card-title {
    font-size: 12px;
    color: #000000;
    line-height: 15px;
}

.author-card-desc {
    font-size: 12px;
    color: #000000;
    line-height: 15px;
}

.author-card-social {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.author-card-social a {
    font-size: 12px;
    color: #FF5E17;
}

.author-card-social a img {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

.Blog-Details-right .Related {
    width: 100%;
    /* aspect-ratio: 288 / 163; */
    background-image: url(../../images/relatedBg.png);
    background-size: 100% auto;
    padding: 12px;
    margin-bottom: 16px;
}

.Blog-Details-right .related-title {
    padding: clamp(10px, 3cqw, 10px) 0 clamp(18px, 6.5cqw, 15px) clamp(12px, 5cqw, 10px);
}

.Blog-Details-right .related-title b {
    background-image: linear-gradient(to right, #ff8a30, #ff5e17);
    color: #fff;
    font-weight: 700;
}

@media (max-width: 950px) {
    .breadcrumb {
        padding: 10px 0;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        align-items: center;
        font-size: 12px;
        line-height: 1.4;
        overflow: hidden;
    }

    .breadcrumb h4,
    .breadcrumb h2 {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .breadcrumb span {
        flex: 0 0 auto;
    }

    .breadcrumb h4 {
        flex: 0 0 auto;
        max-width: clamp(60px, 18vw, 100px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumb h4.crumb-brand {
        max-width: clamp(110px, 36vw, 210px);
    }

    .breadcrumb h2 {
        flex: 0 0 auto;
        max-width: clamp(70px, 22vw, 140px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumb h2.cur {
        flex: 1 1 auto;
        max-width: clamp(120px, 45vw, 220px);
    }

    .breadcrumb h2.cur a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.Related-wrapper {
    position: relative;
    container-type: inline-size;
    overflow: visible;
    --decor-right: 0px;
    --related-bg-w: clamp(180px, 78cqw, 280px);
    --related-handle: clamp(120px, 44cqw, 160px);
    --handle-right: clamp(10px, 4cqw, 18px);
    --handle-top: clamp(58px, 16cqw, 82px);
}

.Related-bg {
    position: absolute;
    width: var(--related-bg-w);
    height: auto;
    aspect-ratio: 214 / 63;
    right: var(--decor-right);
    top: clamp(6px, 2cqw, 10px);
    border-radius: 11px;
    opacity: 1;
    background: linear-gradient(180deg, #FF5905 -42%, #FFAE72 65%);
    pointer-events: none;
    z-index: 0;
}

.Related-handle {
    position: absolute;
    width: var(--related-handle);
    height: var(--related-handle);
    aspect-ratio: 1 / 1;
    right: var(--handle-right);
    top: calc(-1 * var(--handle-top));
    opacity: 1;
    background: url(../../images/shoubing.webp) no-repeat right center/contain;
    pointer-events: none;
    z-index: 1;
}

.Blog-Details-right .Related.Related-b {
    /* --tab-w: clamp(180px, 62cqw, 260px);
    --tab-h: clamp(36px, 12cqw, 52px);
    background: var(--article-related-bg, #FFF2E8);
    overflow: hidden;
    position: relative;
    border: 0;
    clip-path: polygon(
        0 0,
        var(--tab-w) 0,
        calc(var(--tab-w) + var(--tab-h)) var(--tab-h),
        100% var(--tab-h),
        100% 100%,
        0 100%
    );
    padding: clamp(10px, 4cqw, 14px);
    z-index: 2;  */
}

/* 伪元素：完全匹配裁剪形状的线条，无任何缺失 */
/* .Blog-Details-right .Related.Related-b::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; 
    pointer-events: none;
    clip-path: polygon(
        0 0,
        var(--tab-w) 0,
        calc(var(--tab-w) + var(--tab-h)) var(--tab-h),
        100% var(--tab-h),
        100% 100%,
        0 100%
    );
    border: 1px solid var(--article-related-border, #FF8022);
    border-radius: inherit;
    background: transparent;
} */

.Blog-Details-right .Related.Related-b>* {
    position: relative;
    z-index: 2;
}

.Blog-Details-right .Related-box-a {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 0;
}

.Blog-Details-right .Related-image {
    width: clamp(80px, 30cqw, 80px);
    border-radius: 4px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .10);
    aspect-ratio: 1 / 1;
    height: auto;
    background: #fff;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Blog-Details-right .Related-image img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.Blog-Details-right .related-product-name {
    font-size: clamp(10px, 4cqw, 10px);
    line-height: 12px;
    height: 36px;
    margin-bottom: clamp(5px, 2.4cqw, 5px);
    font-weight: 500;
    color: #fff;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.Blog-Details-right .Related-text p {
    font-size: clamp(11px, 3.4cqw, 12px);
    display: flex;
    gap: clamp(4px, 2cqw, 6px);
    margin-top: clamp(6px, 2.6cqw, 10px);
    flex-wrap: wrap;
}

.Blog-Details-right .Related-price {
    display: flex;
    align-items: baseline;
    line-height: 1;
    color: #FFFFFF;
    font-weight: 700;
    flex-wrap: wrap;
    justify-content: space-between;
}

.Blog-Details-right .Related-currency {
    font-size: clamp(24px, 5.2cqw, 24px);
    line-height: 1;
}

.Blog-Details-right .Related-price-number {
    font-size: clamp(24px, 5.2cqw, 24px);
    line-height: 1;
    font-weight: bold;
}

.Blog-Details-right .Related-discount {
    color: #fff;
    font-size: clamp(24px, 5.2cqw, 24px);
    font-weight: 900;
}

.Blog-Details-right .Related-bottom {
    width: 100%;
    aspect-ratio: 288 / 73;
    display: flex;
    align-items: center;
    background-image: url(../../images/RelatedBottomBg.png);
    background-size: 100% 100%;
    border-radius: 4px;
    padding: 8px;
    gap: 10px;
    margin-bottom: 16px;
}

.Blog-Details-right .Related-bottom>img {
    height: 100%;
    aspect-ratio: 512 / 512;
    border-radius: 4px;
}

.Blog-Details-right .Related-brand-name {
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
    height: 30px;
    letter-spacing: 0em;
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.Blog-Details-right .Related-star {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    font-size: clamp(18px, 3.4cqw, 18px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.018000000000000002em;
    color: #FFFFFF;
    font-weight: 800;
    flex: 0 0 auto;
    white-space: nowrap;
}

.Blog-Details-right .Related-star-icon {
    width: clamp(19px, 3.8cqw, 19px);
    height: clamp(19px, 3.8cqw, 19px);
    display: inline-block;
}

.Blog-Details-right .Related-sold {
    font-size: clamp(12px, 3.8cqw, 12px);
    color: #8a8a8a;
    font-weight: 400;
    margin-left: auto;
    white-space: nowrap;
    flex: 0 0 auto;
    color: #FEFEFE;
    padding-left: 12px;
}

.Blog-Details-right .Related .btn6 {
    width: 100%;
    margin-top: clamp(12px, 5.6cqw, 12px);
    height: clamp(37px, 14cqw, 37px);
    border-radius: 4px;
    background-image: linear-gradient(#FFF4E0), var(--article-btn6-bg-image, url(../../images/c-200.webp));
    background-size: cover, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    color: #EE7115;
    font-size: clamp(14px, 4.8cqw, 14px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.8cqw, 14px);
}

.Blog-Details-right .Related .btn6 img {
    width: clamp(24px, 5.2cqw, 24px);
    height: clamp(24px, 5.2cqw, 24px);
    opacity: 1;
    flex: 0 0 auto;
}

.Blog-Details-right .Recent {
    border: 1.5px solid #F5F5F5;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 24px 0;
}

.Blog-Details-right .recent-title {
    padding: 0 0 0 20px;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 16px;
}

.Blog-Details-right .Recent-content {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.Blog-Details-right .Recent-content li {
    padding: 8px 0;
    margin-bottom: 8px;
}

.Blog-Details-right .Recent-content li:hover {
    background: #FFF8F3;
}

.Blog-Details-right .Recent-content li:hover img {
    transform: scale(1.1);
}

.Blog-Details-right .Recent-content li:last-child {
    border-bottom: 0;
}

.Blog-Details-right .Recent-box {
    align-items: center;
    padding: 0 12px;
    gap: 8px;
}

.Blog-Details-right .Recent-image {
    width: clamp(96px, 8.5vw, 118px);
    aspect-ratio: 110 / 74;
    border-radius: 12px;
}

.Blog-Details-right .Recent-text {
    flex: 1;
}

.Blog-Details-right .recent-item-title {
    font-size: clamp(10px, 1.05vw, 10px);
    font-weight: 400;
    color: #7B7B7B;
    line-height: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.Blog-Details-right .Recent-text p {
    margin-top: 4px;
    font-size: clamp(10px, 0.95vw, 10px);
    color: #7B7B7B;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 12px;
}

.ArticleProductsWrap {
    margin: 24px 0;
}

.ArticleProductsWrap .ArticleHeroProduct {
    background-image: url(/buffhub/images/ArticleHeroProduct.png);
    background-size: 100% 100%;
    border-radius: 4px;
    width: 100%;
    aspect-ratio: 668/288;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter {
    width: 100%;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 0 27px 4px 36px;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-img {
    width: 160px;
    height: 160px;
    border-radius: 4px;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body {
    flex: 1;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    margin: 0;
    color: #FFFFFF;
    margin-bottom: 18px;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-features {
    margin: 0;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-features li {
    font-weight: 500;
    font-size: 12px;
    line-height: 17.5px;
    position: relative;
    padding-left: 30px;
    color: #FFFFFF;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-features li:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 5.75px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn {
    padding: 0 37px 0 36px;
    display: flex;
    align-items: stretch;
    gap: 35px;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn:hover,
.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn:focus,
.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn:active {
    text-decoration: none !important;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn .ArticleHeroProduct-btnPrice {
    font-weight: 800;
    font-size: 40px;
    line-height: 48px;
    color: #FFFFFF;
    min-width: 160px;
}

.ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn .ArticleHeroProduct-btnText {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 54px;
    background: #FFFFFF;
    color: #EE7115;
    font-weight: 700;
    font-size: 18px;
    border-radius: 4px;
}

@media (max-width: 950px) {
    .ArticleProductsWrap {
        margin: 0.24rem 0;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft {
        gap: 0.24rem;
        padding: 0 0.35rem 0.07rem 0.36rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-img {
        width: 1.6rem;
        height: 1.6rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-title {
        font-size: 0.2rem;
        line-height: 0.29rem;
        margin-bottom: 0.16rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-features li {
        font-size: 0.16rem;
        line-height: 0.215rem;
        padding-left: 0.14rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProductLeft .ArticleHeroProduct-body .ArticleHeroProduct-features li:before {
        left: 0;
        top: 0.0775rem;
        width: 0.06rem;
        height: 0.06rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn {
        padding: 0 0.36rem;
        gap: 0.24rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn .ArticleHeroProduct-btnPrice {
        font-size: 0.4rem;
        line-height: 0.48rem;
        min-width: 1.6rem;
    }

    .ArticleProductsWrap .ArticleHeroProduct .ArticleHeroProductCenter .ArticleHeroProduct-btn .ArticleHeroProduct-btnText {
        height: 0.54rem;
        font-size: 0.22rem;
    }
}










.ArticleProductsWrap .Choose {
    margin-top: 18px;
    border-radius: 0;
}

.ArticleProductsWrap .Choose-title .choose-title-text {
    font-weight: 800;
    font-size: 18px;
    color: #2F2F2F;
    margin: 0 0 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

.ArticleProductsWrap .Choose-content {
    /* background: #F4F7F9; */
    padding: 0;
    border: 0;
    overflow: hidden;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    /* padding: 18px 18px 0 18px; */
}

/* .ArticleProductsWrap .Choose-content::before{content: "";position: absolute;left: 0;right: 0;top: 0;height: 20px;background: #EEF7F1;z-index: 0;} */
/* .ArticleProductsWrap .Choose-content::after{content: "BUFFHUB SECURITY GUARANTEE";position: absolute;left: 50%;top: 0;height: 20px;display: inline-flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 800;letter-spacing: 0.6px;color: #7ab396;text-transform: uppercase;pointer-events: none;z-index: 1;transform: translateX(-50%);background-image: url(../../images/security.png);background-repeat: no-repeat;background-size: 12px 12px;background-position: left center;padding-left: 18px;width: max-content;max-width: 100%;} */
.ArticleProductsWrap .Choose-content>* {
    position: relative;
    z-index: 1;
}

.ArticleProductsWrap .blog-top {
    width: 100%;
    aspect-ratio: 688 / 115;
    background-image: url(../../images/blogTopBg.png);
    background-size: 100% 100%;
    padding: 0 10px;
    position: relative;
}

.ArticleProductsWrap .blog-top .blogTopCenter {
    height: 67%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ArticleProductsWrap .blog-top .blogTopBottom {
    height: 33%;
    display: flex;
    align-items: center;
    font-weight: 900;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;

}

.ArticleProductsWrap .blog-top .blogTopBottom .apListTitle {
    margin: 0 64px 0 8px;
}

.ArticleProductsWrap .blog-img {
    flex: 0 0 57px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.ArticleProductsWrap .blog-img img {
    width: 57px;
    height: 57px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.ArticleProductsWrap .blog_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}

.ArticleProductsWrap .blog-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ArticleProductsWrap .blog-brand-name {
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 15px;
    width: 100%;
}

/* .ArticleProductsWrap .blog-brand-name:after{content: "›";display: inline-block;font-size: 18px;color: #505050;line-height: 1;margin-left: 10px;} */
.ArticleProductsWrap .blog-trust-badges {
    display: none !important;
}

.ArticleProductsWrap .blog-meta {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 12px;
}

.ArticleProductsWrap .blog-rating {
    font-weight: 900;
    padding: 0;
    color: #FFFFFF;
    display: flex;
    align-items: flex-end;
}

.ArticleProductsWrap .blog-rating .score {
    display: block;
    font-size: 26px;
    line-height: 26px;
    margin-bottom: -2px;
}

.ArticleProductsWrap .blog-rating .sep {
    display: block;
    font-size: 18px;
    line-height: 18px;
}

.ArticleProductsWrap .blog-rating .total {
    display: block;
    font-size: 10px;
    line-height: 10px;
}

.ArticleProductsWrap .blog-rating b {
    background: url(../../images/star.svg) no-repeat center;
    width: 19px;
    height: 19px;
    background-size: 100%;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 6px;
}

.ArticleProductsWrap .blog-sales {
    font-weight: 400;
    white-space: nowrap;
    color: #FFFFFF;
    font-size: 12px;
}

.ArticleProductsWrap .blog-reviews {
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
}

/* .ArticleProductsWrap .blog-reviews:after{content: "›";display: inline-block;font-size: 18px;color: #505050;line-height: 1;margin-left: 10px;} */

/* 分类切换 Tab */
.ArticleProductsWrap .blog-category-tabs {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-bottom: 0;
    background: #fff;
    height: 36px;
    border-top: 1px solid #f1f1f1;
}

.ArticleProductsWrap .blog-category-tabs .cat-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: #777;
    font-weight: 800;
    transition: all .2s ease;
    flex: 0 0 auto;
}

.ArticleProductsWrap .blog-category-tabs .cat-scroll-btn:hover {
    border-color: #ff5e17;
    color: #ff5e17;
    box-shadow: 0 6px 14px rgba(255, 94, 23, 0.12);
}

.ArticleProductsWrap .blog-category-tabs .cat-scroll-wrap {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%;
}

.ArticleProductsWrap .blog-category-tabs .cat-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.ArticleProductsWrap .blog-category-tabs ul {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 0 0 24px;
    margin: 0;
    list-style: none;
    flex-wrap: nowrap;
    height: 100%;
    background: #fff;
}

.ArticleProductsWrap .blog-category-tabs li {
    position: relative;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all .5s;
    z-index: 0;
    background: transparent;
    font-weight: 400;
    color: #6C6C6C;
}

.ArticleProductsWrap .blog-category-tabs li:after {
    position: absolute;
    content: "";
    width: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .5s;
    height: 2px;
    background: #ff5e17;
    display: block;
    z-index: 2;
    border-bottom: 0;
}

.ArticleProductsWrap .blog-category-tabs li.active,
.ArticleProductsWrap .blog-category-tabs li:hover {
    color: #FF5E17;
    font-weight: bold;
}

.ArticleProductsWrap .blog-category-tabs li.active:after,
.ArticleProductsWrap .blog-category-tabs li:hover:after {
    width: 100%;
}

.ArticleProductsWrap .blog-category-tabs li span {
    display: block;
    padding: 12px 0;
    color: inherit;
    font-size: 14px;
    transition: all .5s;
}

.ArticleProductsWrap .blog-category-tabs li.active span {
    color: #FF5E17;
    font-weight: bold;
    padding: 10px 0;
    margin: 0;
}

.ArticleProductsWrap .blog-category-tabs li:hover span {
    color: #FF5E17;
    font-weight: bold;
}

.ArticleProductsWrap .blog-category-tabs li.active:after {
    width: 27px;
}

.ArticleProductsWrap .GenesisTop .category-panel {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.ArticleProductsWrap .GenesisTop .category-panel.active {
    display: flex;
}

.ArticleProductsWrap .Choosebox {
    margin-top: 14px;
}

.ArticleProductsWrap .Choosebox ul {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.ArticleProductsWrap .Choosebox li {
    width: calc((100% - 24px) / 3);
}

.ArticleProductsWrap .Zhongli {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ArticleProductsWrap .Zhongli-img {
    position: relative;
}

.ArticleProductsWrap .Zhongli-img:before {
    position: absolute;
    content: "";
    background-image: linear-gradient(transparent, #fff);
    width: 100%;
    height: clamp(32px, 4vw, 44px);
    left: 0;
    bottom: 0;
}

.ArticleProductsWrap .Zhongli-img img {
    width: 100%;
    border-radius: 0;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.ArticleProductsWrap .Zhongli-img b {
    background: url(../../images/pic159.png);
    width: clamp(11px, 1.1vw, 13px);
    height: clamp(11px, 1.1vw, 13px);
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    top: clamp(8px, 1vw, 10px);
    right: clamp(8px, 1vw, 10px);
}

.ArticleProductsWrap .Zhongli-text {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ArticleProductsWrap .Zhongli-text h2 {
    font-weight: 800;
    font-size: clamp(12px, 1.2vw, 13px);
    color: #393939;
    line-height: 1.35;
    margin: 0;
    min-height: clamp(30px, 3.8vw, 36px);
}

.ArticleProductsWrap .Zhongli-text p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    gap: 10px;
}

.ArticleProductsWrap .Zhongli-text p b {
    font-size: clamp(15px, 1.6vw, 18px);
    color: #FF5905;
    font-weight: 900;
}

.ArticleProductsWrap .Zhongli-text p em {
    font-weight: 400;
    font-size: clamp(10px, 1.1vw, 12px);
}

.ArticleProductsWrap .Zhongli-text p span {
    color: #fff;
    line-height: clamp(16px, 1.8vw, 18px);
    border-radius: 4px;
    padding: 0 8px;
    background: #FF5905;
    font-size: clamp(10px, 1.1vw, 12px);
    font-weight: 800;
}

.ArticleProductsWrap .Zhongli-text a {
    display: block;
    text-align: center;
    border-radius: 10px;
    line-height: clamp(30px, 3.2vw, 36px);
    background: #FF5905;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.ArticleProductsWrap .GenesisTop {
    border-radius: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    max-height: 270px;
    transition: max-height 0.3s ease-out;
}

.ArticleProductsWrap .GenesisTop.fold {
    /* max-height: 100%; */
}

.ArticleProductsWrap .product-scroll-hint {
    display: none;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    padding: 16px 0 8px;
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(to bottom, rgba(242, 247, 252, 0) 0%, rgba(242, 247, 252, 0.86) 55%, #F2F7FC 100%);
    pointer-events: none;
}

.ArticleProductsWrap .product-scroll-hint .end {
    display: none;
}

.ArticleProductsWrap .GenesisTop.is-scroll-end .product-scroll-hint {
    color: #4a4a4a;
}

.ArticleProductsWrap .GenesisTop.is-scroll-end .product-scroll-hint .hint {
    display: none;
}

.ArticleProductsWrap .GenesisTop.is-scroll-end .product-scroll-hint .end {
    display: inline;
}

.ArticleProductsWrap .GenesisTop.is-collapsed .product-scroll-hint {
    display: none;
}

.ArticleProductsWrap .GenesisTop.is-collapsed {
    overflow: hidden;
    /* overscroll-behavior: contain; */
}

.ArticleProductsWrap .GenesisTop.is-collapsed {
    /* -webkit-overflow-scrolling: touch; */
    scrollbar-width: none;
}

.ArticleProductsWrap .GenesisTop.is-collapsed::-webkit-scrollbar {
    display: none;
}

.ArticleProductsWrap .GenesisTop ul {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: flex-start;
    padding: 18px 0;
    margin: 0;
}

.ArticleProductsWrap .GenesisTop li {
    width: calc(25% - 18px * 3 / 4);
    margin: 0;
}

.ArticleProductsWrap .Choose-content.collapsed .GenesisTop {
    max-height: 470px;
    overflow: hidden;
}

.ArticleProductsWrap .Choose-content.collapsed .GenesisTop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(242, 247, 252, 0), rgba(242, 247, 252, 0.95) 60%, #F2F7FC);
    pointer-events: none;
    z-index: 1;
}

.ArticleProductsWrap .GenesisBox {
    position: relative;
    width: 100%;
    transition: all .3s;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #F5F5F5;
    container-type: inline-size;
    border-radius: 4px;
}

.ArticleProductsWrap .GenesisBox:before {
    display: none;
}

.ArticleProductsWrap .GenesisTp {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    background-color: #F9D93A;
    padding: 12px 12px 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.ArticleProductsWrap .GenesisTp img {
    width: 72%;
    transition: all .3s;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.ArticleProductsWrap .GenesisTp p {
    display: none;
}

.ArticleProductsWrap .discount-badge,
.ArticleProductsWrap .percentage {
    position: absolute;
    right: 0;
    bottom: -2px;
    color: #FF5D50;
    background: #F5F5F5;
    font-size: 12px;
    font-weight: 700;
    height: 16px;
    padding: 0 5px;
    border: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.ArticleProductsWrap .discount-badge:after {
    display: none;
}

.ArticleProductsWrap .GenesisText {
    padding: 0 5px 5px;
    position: relative;
    background: #fff;
    margin-top: 0;
}

.ArticleProductsWrap .GenesisText:before,
.ArticleProductsWrap .GenesisText:after {
    display: none;
}

.ArticleProductsWrap .product-name {
    font-size: 14px;
    color: #000000;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 40px;
    margin-bottom: 6px;
}

.ArticleProductsWrap .price-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: nowrap;
}

.ArticleProductsWrap .price-row .price-value {
    color: #FF5905;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}

.ArticleProductsWrap .price-row .price-value b {
    display: inline-block;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex: 0 0 auto;
}

.ArticleProductsWrap .discount-row .discount b {
    font-size: 10px;
    line-height: 12px;
    color: #717171;
    text-decoration: line-through;
    font-weight: 700;
}

.ArticleProductsWrap .save-badge {
    margin: 12px 3px 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 4px;
    background: #FF5905;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.ArticleProductsWrap .discount {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    line-height: 12px;
}

.ArticleProductsWrap .bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    font-size: 13px;
    padding: 0;
    column-gap: 10px;
    row-gap: 6px;
}

.ArticleProductsWrap .uid-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 0.8vw, 11px);
    color: #2D78D2;
    background: #CFE6FF;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    line-height: 20px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.ArticleProductsWrap .rating-badge {
    cursor: pointer;
    width: 100%;
    height: 29px;
    border-radius: 4px;
    background: #EE7115;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ArticleProductsWrap .rating-badge:hover {
    color: #fff;
    opacity: .92;
    text-decoration: none;
}

.ArticleProductsWrap .rating-badge:before {
    display: none;
}

.ArticleProductsWrap .GenesisText.discount-content {
    padding: 8px;
}

.ArticleProductsWrap .GenesisText.discount-content .product-name {
    grid-area: name;
}

.ArticleProductsWrap .GenesisText.discount-content .price-row {
    grid-area: price;
    min-width: 0;
}

.ArticleProductsWrap .GenesisText.discount-content .discount-row {
    margin-bottom: 6px;
    position: relative;
}

.ArticleProductsWrap .GenesisText.discount-content .bottom-row {
    display: block;
}

@container (max-width: 170px) {
    .ArticleProductsWrap .GenesisText.discount-content {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "price" "discount" "bottom";
    }

    .ArticleProductsWrap .price-row {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .ArticleProductsWrap .price-row .price-value b {
        display: inline-block;
    }
}

.ArticleProductsWrap .blog-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 10px 10px;
    border-radius: 10px;
    height: 40px;
    background: #F7D64A;
    color: #2b2b2b;
    font-weight: 900;
    font-size: 14px;
    text-decoration: none;
}

.ArticleProductsWrap .blog-buy-now:hover {
    color: #2b2b2b;
    text-decoration: none;
    opacity: .95;
}


@media (hover: none) and (pointer: coarse) {
    .ArticleProductsWrap .GenesisBox:hover {
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
        transform: none;
    }

    .ArticleProductsWrap .GenesisBox:hover img {
        transform: none;
    }
}

@media (max-width: 1280px) and (min-width: 992px) {
    .ArticleProductsWrap .GenesisTop ul {
        gap: 4px;
        margin: 0 0 1em 0em;
    }

    .ArticleProductsWrap .GenesisTop li {
        width: calc(33.33% - 18px * 2 / 3);
        margin-top: 0;
    }
}

@media (max-width: 1100px) and (min-width: 992px) {
    .ArticleProductsWrap .GenesisTop ul {
        gap: 4px;
    }

    .ArticleProductsWrap .GenesisTop li {
        width: calc(33.33% - 18px * 2 / 3);
        margin-top: 0;
    }
}

.ArticleProductsWrap .blog-botton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    min-width: 136px;
    padding: 0 14px;
    line-height: 29px;
    border: 1.5px solid #F5F5F5;
    border-radius: 4px;
    color: #000000;
    cursor: pointer;
    transition: all .25s ease;
    user-select: none;
    font-size: 12px;
    background: #fff;
    font-weight: 700;
}

.ArticleProductsWrap .blog-botton:after {
    filter: brightness(0);
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    background: url("../../images/down1.svg") no-repeat center/contain;
}

.ArticleProductsWrap .js-article-products-more-fold.blog-botton:after {
    transform: rotate(180deg);
}

.ArticleProductsWrap .blog-botton:hover {
    background: #EE7115;
    color: #fff;
}

.ArticleProductsWrap .blog-botton:hover:after {
    filter: brightness(3);
}

.ArticleProductsWrap .article-products-more {
    padding-top: 14px;
    display: flex;
    justify-content: center;
    background: #ffff;
    width: calc(100% + 36px);
    margin-left: -18px;
}

.ArticleProductsWrap .article-products-more-fold {
    padding-top: 14px;
    display: none;
    background: #ffff;
    width: calc(100% + 36px);
    margin-left: -18px;
}

.ArticleProductsWrap .load-more-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.ArticleProductsWrap .load-more-btn {
    padding: 8px 14px;
    border-radius: 16px;
    border: 1px solid #ff5e17;
    background: #ff5e17;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(255, 94, 23, 0.24);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: normal;
}

.ArticleProductsWrap .load-more-btn .arrow {
    display: inline-block;
    transition: transform .2s;
}

.ArticleProductsWrap .load-more-btn.expanded .arrow {
    transform: rotate(180deg);
}

.ArticleProductsWrap .load-more-btn:hover {
    opacity: .9;
}

@media (max-width: 950px) {
    .main-content {
        margin: 0 auto;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
        background-color: #fff !important;
    }

    .Blog-Details {
        flex-direction: column;
    }

    .Blog-Details-left {
        position: fixed;
        left: 10px;
        top: 62%;
        transform: translateY(-50%);
        width: 52px;
        height: 52px;
        margin: 0;
        padding: 0;
        background: transparent;
        flex: 0 0 auto;
        z-index: 1200;
        box-shadow: none;
        border: none;
    }

    .Blogarticle-content table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        border-radius: 8px;
    }

    .Blogarticle-content table th,
    .Blogarticle-content table td {
        padding: 8px 10px;
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }

    .Blog-Details-left:before {
        content: "";
        display: block;
        width: 52px;
        height: 52px;
        background: #fff url(../../images/md.webp) center/32px 32px no-repeat;
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        border: 1px solid #e8e8e8;
    }

    .Blog-Details-left h2,
    .Blog-Details-left .Blog-Details-box,
    .Blog-Details-left .toc-heading {
        display: none;
    }

    .Blogarticle {
        min-width: 0;
        width: 100%;
    }

    .Blog-Details-right {
        position: relative;
        top: auto;
        width: 100%;
        flex: 0 0 auto;
        margin-top: 14px;
    }

    .Related-wrapper {
        width: 100%;
        overflow: hidden;
        padding: 0 8px;
        box-sizing: border-box;
        --decor-right: clamp(6px, 2cqw, 12px);
        --related-bg-w: clamp(140px, 66cqw, 220px);
        --related-handle: clamp(96px, 42cqw, 140px);
        --handle-right: clamp(6px, 2cqw, 12px);
        --handle-top: clamp(42px, 14cqw, 72px);
    }

    .Blog-Details-right .Related {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    .Related-bg {
        right: var(--decor-right);
        width: var(--related-bg-w);
        height: auto;
        aspect-ratio: 214 / 63;
        top: clamp(4px, 1.4cqw, 6px);
    }

    .Related-handle {
        right: var(--handle-right);
        top: calc(-1 * var(--handle-top));
        width: var(--related-handle);
        height: var(--related-handle);
        aspect-ratio: 1 / 1;
        transform: none;
    }

    .Blog-Details-right .related-title {
        padding: clamp(12px, 5cqw, 16px) 0 clamp(14px, 6cqw, 20px) clamp(12px, 5cqw, 16px);
        font-size: clamp(13px, 4.6cqw, 15px);
    }

    .Blog-Details-right .Related-box-a {
        padding: clamp(10px, 3.4cqw, 16px);
        gap: clamp(8px, 2.8cqw, 14px);
    }

    .Blog-Details-right .Related-image {
        width: clamp(80px, 18cqw, 160px);
    }

    .Blog-Details-right .Related-price-number {
        font-size: clamp(20px, 5cqw, 30px);
    }

    .Blog-Details-right .Related-discount {
        min-width: clamp(36px, 10cqw, 60px);
        font-size: clamp(10px, 3cqw, 12px);
    }

    .Blog-Details-right .Related-bottom {
        padding: clamp(8px, 2.8cqw, 14px);
    }

    .Blog-Details-right .Related .btn6 {
        height: clamp(38px, 12cqw, 52px);
        font-size: clamp(14px, 4cqw, 18px);
        margin-top: clamp(12px, 3.2cqw, 18px);
    }


    /* blog-top 头像信息条 - 移动端样式 */
    .ArticleProductsWrap .Choose {
        margin-top: .12rem;
    }

    .ArticleProductsWrap .Choose-content {
        max-width: none;
        margin: 0;
        background: none;
        box-shadow: none;
        padding: 0;
    }

    .ArticleProductsWrap .blog-top {
        padding: 0 .1rem;
    }

    .ArticleProductsWrap .blog-top .blogTopCenter {
        gap: .1rem;
    }

    .ArticleProductsWrap .blog-img {
        flex: 0 0 .6rem;
    }

    .ArticleProductsWrap .blog-img img {
        width: .6rem;
        height: .6rem;
    }

    .ArticleProductsWrap .blog_text {
        gap: .04rem;
    }

    .ArticleProductsWrap .blog-brand-name {
        font-size: .2rem;
        line-height: .24rem;
        margin-bottom: .1rem;
    }

    .ArticleProductsWrap .blog-meta {
        gap: .12rem;
        font-size: .2rem;
        line-height: .2rem;
    }

    .ArticleProductsWrap .blog-name-row {
        gap: .1rem;
    }

    .ArticleProductsWrap .blog-rating b {
        width: .24rem;
        height: .24rem;
        margin-bottom: .01rem;
    }

    .ArticleProductsWrap .blog-rating .score {
        font-size: .26rem;
        line-height: .26rem;
        margin-bottom: -0.02rem;
    }

    .ArticleProductsWrap .blog-top .blogTopBottom .apListTitle {
        margin: 0 .34rem 0 .04rem;
    }

    .ArticleProductsWrap .blog-rating .sep {
        font-size: .18rem;
        line-height: .18rem;
    }

    .ArticleProductsWrap .blog-top .blogTopBottom {
        font-size: .2rem;
        line-height: .2rem;
    }

    .blogTopBottom .buffhubx {
        width: 1.47rem;
    }

    .blogTopBottom .exploreNow {
        width: 1.53rem;
    }

    .ArticleProductsWrap .blog-sales {
        font-size: .2rem;
    }

    .ArticleProductsWrap .blog-reviews {
        font-size: .2rem;
    }

    .ArticleProductsWrap .product-name {
        font-size: .24rem;
        line-height: .24rem;
        height: .48rem;
        margin-bottom: .13rem;
    }

    .ArticleProductsWrap .discount-badge img {
        width: .14rem;
        aspect-ratio: 10 / 12;
    }

    .ArticleProductsWrap .GenesisText.discount-content {
        padding: .15rem;
    }

    .ArticleProductsWrap .discount-badge,
    .ArticleProductsWrap .percentage {
        bottom: -.03rem;
        font-size: .2rem;
        height: .3rem;
        line-height: .3rem;
        padding: 0 .1rem;
        gap: .05rem;
    }


    .ArticleProductsWrap .blog-category-tabs {
        margin-top: 0;
        background: #fff;
        border-top: 1px solid #f1f1f1;
        border-radius: 0;
        padding: 0;
    }

    .ArticleProductsWrap .blog-category-tabs .cat-scroll-btn {
        display: none;
    }

    .ArticleProductsWrap .blog-category-tabs ul {
        gap: 0;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        background: #fff;
    }

    .ArticleProductsWrap .blog-category-tabs li {
        width: 50%;
        text-align: center;
        font-size: .26rem;
    }

    .ArticleProductsWrap .blog-category-tabs li.active {
        background: #f5f5f5;
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
        filter: none;
    }

    .ArticleProductsWrap .blog-category-tabs li span {
        padding: .2rem 0;
    }


    .ArticleProductsWrap .GenesisTop::-webkit-scrollbar {
        display: none;
    }

    .ArticleProductsWrap .GenesisTop ul {
        gap: .24rem;
        padding-top: .2rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* 横向滚动 */
        overflow-y: hidden;
        /* 隐藏垂直滚动 */
        white-space: nowrap;
        /* 防止容器内换行（可选，视内容而定） */
    }

    .ArticleProductsWrap .GenesisTop .category-panel.active {
        flex-wrap: nowrap;
    }

    .ArticleProductsWrap .GenesisTop li {
        flex-shrink: 0;
        /* 关键：禁止子元素收缩 */
        width: 2.52rem;
    }

    .ArticleProductsWrap .product-panel {
        display: flex;
        flex-wrap: nowrap;
        gap: .25rem;
    }

    .ArticleProductsWrap .GenesisTop.is-collapsed {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ArticleProductsWrap .Choose-content.collapsed .GenesisTop {
        max-height: none;
    }

    .ArticleProductsWrap .Choose-content.collapsed .GenesisTop::after {
        display: none;
    }

    .ArticleProductsWrap .product-scroll-hint {
        display: none;
    }

    .ArticleProductsWrap .article-products-more {
        display: none;
    }

    .ArticleProductsWrap .bottom-row {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: .16rem;
        row-gap: 0;
    }

    .ArticleProductsWrap .uid-badge {
        width: auto;
        justify-content: center;
    }

    .ArticleProductsWrap .rating-badge {
        height: .48rem;
        font-size: .2rem;
    }

    /* 窄卡片价格适配：避免币种/数字逐字断行，必要时把折扣价移到下一行 */
    .ArticleProductsWrap .GenesisText.discount-content {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "price" "discount" "bottom";
    }

    .ArticleProductsWrap .price-row {
        gap: .1rem;
    }

    .ArticleProductsWrap .price-row .price-value {
        font-size: .32rem;
        line-height: .39rem;
        margin-bottom: .08rem;
    }

    .ArticleProductsWrap .GenesisText.discount-content .discount-row {
        margin-bottom: .11rem;
    }

    .ArticleProductsWrap .discount-row .discount b {
        font-size: .20rem;
    }

    .ArticleProductsWrap .discount {
        font-size: .20rem;
        line-height: .24rem;
    }
}

.blog-share-float.sticky {
    position: fixed;
    right: auto;
    left: auto;
    margin: 0;
    top: auto;
}

.blog-share-container.expanded {
    width: 42px;
    height: 312px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

.blog-share-toggle {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background-color: #FC8651;
    transition: all 0.3s ease;
}

.blog-share-container.expanded .blog-share-toggle {
    height: 50px;
}

.blog-share-toggle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.blog-share-container.expanded .blog-share-toggle img {
    transform: rotate(180deg);
}

.blog-share-toggle .share-toggle-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.blog-share-container.expanded .blog-share-menu {
    display: flex;
}

.blog-share-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1;
    transform: scale(0.8);
}

.blog-share-container.expanded .blog-share-item {
    opacity: 1;
    transform: scale(1);
}

.blog-share-item:hover {
    transform: scale(1.15);
}

.blog-share-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

@media (max-width: 1200px) {
    .blog-share-float {
        display: none;
    }
}

/* Mobile TOC bottom sheet */
.toc-mobile-overlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1298;
    opacity: 0;
    transition: opacity .25s ease;
}

.toc-mobile-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    max-height: 78vh;
    overflow: hidden;
    z-index: 1299;
    transform: translateY(100%);
    transition: transform .28s ease;
}

.toc-mobile-sheet.open {
    display: block;
    transform: translateY(0);
}

.toc-mobile-overlay.open {
    display: block;
    opacity: 1;
}

.toc-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f1f1;
}

.toc-mobile-title {
    font-weight: 800;
    font-size: 18px;
    color: #1f1f1f;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}

.toc-mobile-title:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../../images/md.webp) center/contain no-repeat;
}

.toc-mobile-close {
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    color: #111;
}

.toc-mobile-body {
    padding: 6px 0 16px;
    overflow-y: auto;
    max-height: calc(78vh - 56px);
}

.toc-mobile-body .toc-list {
    padding: 0 18px;
}

.toc-mobile-body .toc-item {
    list-style: none;
}

.toc-mobile-body .toc-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0 10px;
    border-bottom: 1px solid #f4f4f4;
}

.toc-mobile-body .toc-title .toc-toggle {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: solid #3c3c3c;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    transition: transform .15s ease, border-color .15s ease;
    margin-top: 4px;
}

.toc-mobile-body .toc-title.has-children .toc-toggle.open {
    transform: rotate(135deg);
    border-color: #ff5e17;
}

.toc-mobile-body .toc-link {
    flex: 1;
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #2c2c2c;
    line-height: 1.45;
}

.toc-mobile-body .toc-title .toc-link.active {
    color: #ff5e17;
}

.toc-mobile-body .toc-children {
    padding: 6px 0 12px 22px;
    list-style: none;
    display: none;
}

.toc-mobile-body .toc-children .toc-link {
    font-size: 14px;
    font-weight: 700;
    color: #6c6c6c;
    line-height: 1.5;
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
}

.toc-mobile-body .toc-children .toc-link.active {
    color: #ff5e17;
    background: #fff3ea;
    font-weight: 800;
}

/* Mobile share bar */
.article-share-mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.article-share-mobile .share-label {
    font-size: 14px;
    color: #7a7a7a;
    white-space: nowrap;
}

.article-share-mobile .share-actions {
    display: flex;
    justify-content: right;
    gap: .19rem;
}

.article-share-mobile .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .2s ease, opacity .2s ease;
    padding: 0;
}

.article-share-mobile .share-btn img {
    width: .24rem;
    height: .24rem;
    object-fit: contain;
}

.article-share-mobile .share-btn:active {
    transform: scale(0.97);
}

@media (max-width: 950px) {
    .article-share-mobile {
        display: flex;
    }

    .author {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .author-right {
        width: auto;
    }

    .author-right ul {
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }
}