@charset "utf-8";

/* PC width Phase 2: scoped to legacy high-traffic list pages only. */
html.pc-phase2-page .subNav,
html.pc-phase2-page .advance-nav,
html.pc-phase2-page .line-cate-nav,
html.pc-phase2-page .foot-con,
html.pc-phase2-page .phase2-shell {
    width: calc(100% - 40px) !important;
    max-width: 1440px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

html.pc-phase2-page .phase2-frame {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html.pc-phase2-page .phase2-shell > .main {
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

html.pc-phase2-page .foot-con {
    padding-left: 50px;
    padding-right: 50px;
}

html.pc-phase2-page .main .zhe-more {
    width: 100%;
    max-width: 976px;
    box-sizing: border-box;
}

/* The legacy product component stays at four fixed-width cards. */
html.phase2-old-items .phase2-shell .goods-list,
html.phase2-brand-goods .phase2-shell .goods-list {
    display: grid;
    grid-template-columns: repeat(4, 286px);
    justify-content: space-between;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

html.phase2-old-items .phase2-shell .goods-list > li,
html.phase2-brand-goods .phase2-shell .goods-list > li {
    float: none;
    width: 284px;
    margin: 0 0 18px;
}

html.phase2-old-items .phase2-shell .page,
html.phase2-brand-goods .phase2-shell .page {
    width: 100%;
    padding-top: 30px;
}

/* Movie and star directories keep four legacy 284px cards across the wider shell. */
html.phase2-media-list .phase2-shell > .main {
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

html.phase2-media-list .phase2-shell .goods-list {
    display: grid;
    grid-template-columns: repeat(4, 284px);
    justify-content: space-between;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

html.phase2-media-list .phase2-shell .goods-list > li {
    float: none;
    width: 284px;
    margin-left: 0;
    margin-right: 0;
}

html.phase2-media-list .phase2-shell .page {
    width: 100%;
}

/* Brand directory and brand detail use their 290px legacy card variant. */
html.phase2-brand-directory .phase2-shell .goods-list,
html.phase2-brand-view .phase2-shell .goods-list {
    display: grid;
    grid-template-columns: repeat(4, 292px);
    justify-content: space-between;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

html.phase2-brand-directory .phase2-shell .goods-list > li,
html.phase2-brand-view .phase2-shell .goods-list > li {
    float: none;
    width: 290px;
    margin: 0 0 18px;
}

html.phase2-brand-directory .phase2-shell .page,
html.phase2-brand-view .phase2-shell .page {
    width: 100%;
    padding-top: 30px;
}

html.phase2-brand-directory .phase2-shell .hot-brand .brand-list,
html.phase2-brand-view .phase2-shell .hot-brand .brand-list {
    display: grid;
    grid-template-columns: repeat(4, 285px);
    justify-content: space-between;
    width: 100% !important;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
}

html.phase2-brand-directory .phase2-shell .hot-brand .brand-list > li,
html.phase2-brand-view .phase2-shell .hot-brand .brand-list > li {
    float: none;
    width: 285px;
    margin: 7px 0;
}

html.phase2-brand-directory .phase2-shell .slide-logos .logos-box {
    width: 1190px !important;
    max-width: calc(100% - 20px);
}

html.phase2-brand-directory .phase2-shell .brand-box,
html.phase2-brand-view .phase2-shell .brand-box,
html.phase2-brand-view .phase2-shell .mains2 {
    width: 100% !important;
    max-width: none;
}

html.phase2-brand-view .brand-banner .center {
    width: calc(100% - 40px) !important;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

html.phase2-brand-directory .main .zhe-line,
html.phase2-brand-view .main .zhe-line,
html.phase2-brand-directory .hot-brand,
html.phase2-brand-view .hot-brand {
    min-width: 0;
}

/* Search keeps DOM order: cards occupy four columns, article/brand blocks span all. */
html.phase2-search .search-page .search-results,
html.phase2-search .search-page .search-brand-goods {
    display: grid;
    grid-template-columns: repeat(4, 292px);
    justify-content: space-between;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

html.phase2-search .search-page .search-results > li.search-card,
html.phase2-search .search-page .search-brand-goods > li {
    float: none;
    width: 290px;
    margin: 0 0 10px;
}

html.phase2-search .search-page .search-results > li.search-row {
    grid-column: 1 / -1;
    float: none;
    clear: both;
    width: 100%;
    margin-right: 0;
}

html.phase2-search .search-page .search-results > li.search-row > dl,
html.phase2-search .search-page .search-article dl {
    width: 100%;
    box-sizing: border-box;
}

html.phase2-search .search-page > div[style*="width:1200px"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Favorites contains full-row brand headings between ordinary cards. */
html.phase2-like .phase2-shell > .goods-list,
html.phase2-like .phase2-shell > .goods-list > .bd .goods-list {
    display: grid;
    grid-template-columns: repeat(4, 292px);
    justify-content: space-between;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

html.phase2-like .phase2-shell > .goods-list > li,
html.phase2-like .phase2-shell > .goods-list > .bd .goods-list > li {
    float: none;
    width: 290px;
    margin: 0 0 10px;
}

html.phase2-like .phase2-shell > .goods-list > .bd {
    grid-column: 1 / -1;
    width: 100%;
}

html.phase2-like .phase2-shell .page {
    width: 100%;
}

/* Coupon list remains two columns; its fixed cards align to both container edges. */
html.phase2-quan .line-cate-nav,
html.phase2-quan .quan .quan_main {
    width: calc(100% - 40px) !important;
    max-width: 1440px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

html.phase2-quan .quan .quan_main .quan_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

html.phase2-quan .quan .quan_main .quan_list .quan_goods,
html.phase2-quan .quan .quan_main .quan_list .quan_goods.last {
    float: none;
    flex: 0 0 583px;
    width: 583px;
}

/* quanitem ships its detail CSS outside this local copy; only known shells are widened. */
html.phase2-quanitem .phase2-header-host {
    width: 100%;
}

html.phase2-quanitem .main-container,
html.phase2-quanitem .footer-wrapper {
    width: calc(100% - 40px) !important;
    max-width: 1440px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

@media (max-width: 1279px) {
    html.pc-phase2-page .foot-con {
        padding-left: 30px;
        padding-right: 30px;
    }
}