/* main-product.css - 产品区域移动端 Tab Bar 横向滚动适配
 * 在 main.css 之后加载，覆盖移动端 tab bar 默认布局
 */

@media screen and (max-width: 768px) {
    /* ---------- Tab Bar 强制横向滚动 ---------- */

    .tpm-portal-product .tpm-portal-tab__bar-wrap {
        position: relative;
        z-index: 1
    }

    .tpm-portal-product .tpm-portal-tab__bar {
        padding: 0 24px;
        overflow: hidden;
        overflow-x: auto;
        height: 48px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .tpm-portal-product .tpm-portal-tab__bar::-webkit-scrollbar {
        display: none
    }

    /* 内部容器：横向 inline-flex，不换行 */
    .tpm-portal-product .tpm-portal-tab__bar-inner {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: auto;
        white-space: nowrap;
        padding: 0;
        height: auto;
        -ms-flex: none;
        flex: none;
        -ms-flex-pack: start;
        justify-content: flex-start;
        overflow: visible
    }

    /* tab 列改为内联横向排列 */
    .tpm-portal-product .tpm-portal-tab__bar-col {
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: auto;
        white-space: nowrap;
        -ms-flex: none;
        flex: none
    }

    /* tab 项改为 inline-flex，水平排列，间距 20px */
    .tpm-portal-product .tpm-portal-tab__item {
        width: auto;
        display: -ms-inline-flexbox;
        display: inline-flex;
        padding: 13px 0;
        margin-right: 20px;
        margin-top: 0;
        margin-left: 0;
        -ms-flex: none;
        flex: none
    }

    .tpm-portal-product .tpm-portal-tab__item + .tpm-portal-tab__item {
        margin-top: 0;
        margin-left: 0
    }

    .tpm-portal-product .tpm-portal-tab__item-icon + .tpm-portal-tab__item-text {
        margin-left: 8px;
        font-size: 14px;
        line-height: 22px
    }

    /* 激活态下划线保持在底部 */
    .tpm-portal-product .tpm-portal-tab__item:after {
        bottom: 0
    }

    /* tab 内容区去掉顶部 padding */
    .tpm-portal-product .tpm-portal-tab__content {
        padding-top: 0
    }

    /* ---------- 产品卡片列表移动端微调 ---------- */

    .tpm-portal-product__section {
        overflow: visible;
        background: #fff !important
    }

    .tpm-portal-product__section .tpm-portal-section__inner {
        padding-bottom: 0
    }

    .tpm-portal-product__section .tpm-portal-section__hd {
        margin-bottom: 11px
    }

    .tpm-portal-product__section .tpm-portal-section__bd,
    .tpm-portal-product__section .tpm-portal-tab__content {
        padding: 0
    }

    .tpm-portal-product__content {
        border-radius: 0;
        display: block;
        border: 0;
        border-top: 1px solid #eee;
        background: #f6f8fb;
        padding: 12px 24px
    }

    .tpm-portal-product__content.type-hot {
        display: block;
        padding: 0;
        background: transparent
    }

    .tpm-portal-product__list {
        width: 100%;
        border-bottom: 1px solid #eee
    }

    .tpm-portal-product__list-hd {
        padding: 16px 24px;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .tpm-portal-product__list-hd:after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border: solid #999;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
        flex-shrink: 0;
        margin-left: 8px
    }

    .tpm-portal-product__list.is-open .tpm-portal-product__list-hd:after {
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg)
    }

    .tpm-portal-product__list-title {
        background: #000;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500
    }

    .tpm-portal-product__list-desc {
        display: none
    }

    .tpm-portal-product__list-content {
        display: none;
        border-top: 1px solid #eee;
        background: #f6f8fb;
        padding: 12px 24px
    }

    .tpm-portal-product__list.is-open .tpm-portal-product__list-content {
        display: block
    }

    .tpm-portal-product__cards,
    .tpm-portal-product__recommends {
        width: 100%;
        background: #fff
    }

    .tpm-portal-product__recommends {
        border-right: 0
    }

    .tpm-portal-product__cards {
        margin-top: 16px
    }

    /* 单个产品卡片垂直堆叠 */
    .tpm-portal-product__cards .tpm-portal-product__card {
        display: block;
        width: 100%;
        height: auto
    }

    .tpm-portal-product__card {
        background: #fff;
        padding: 16px
    }

    .tpm-portal-product__card:nth-child(n+2) {
        border-top: 1px solid #eee
    }

    .tpm-portal-product__card.is-more .tpm-portal-product__card-inner {
        padding-top: 0
    }

    .tpm-portal-product__card-title {
        font-size: 16px;
        line-height: 24px
    }

    .tpm-portal-product__card-arrow,
    .tpm-portal-product__card-btn-wrap {
        display: none
    }

    .tpm-portal-product__card-desc {
        font-size: 12px;
        line-height: 20px
    }

    .tpm-portal-product__card-tags {
        gap: 0
    }

    .tpm-portal-product__card-tag + .tpm-portal-product__card-tag {
        margin-left: 4px
    }
}

/* ---------- 更小屏幕（600px 以下）padding 收紧 ---------- */

@media screen and (max-width: 600px) {
    .tpm-portal-product .tpm-portal-tab__bar {
        padding: 0 16px
    }

    .tpm-portal-product__list-hd {
        padding: 16px
    }

    .tpm-portal-product__content,
    .tpm-portal-product__list-content {
        padding: 12px 16px
    }
}