/* 一秒互联公司  www.yimiaonet.com：市场与社区商业化细节收口，仅作用于对应页面。 */

body.marketplace-standalone-page {
    --ym-market-ink: #172033;
    --ym-market-body: #536176;
    --ym-market-muted: #8793a5;
    --ym-market-line: #dfe6ef;
    --ym-market-blue: #1769e0;
    --ym-market-bg: #f2f5f9;
    background: var(--ym-market-bg) !important;
}

body.marketplace-standalone-page .market-home-page {
    width: min(1280px, calc(100% - 48px));
    padding: 18px 0 48px;
}

body.marketplace-standalone-page .market-home-first-screen {
    grid-template-columns: 242px minmax(0, 1fr) 252px;
    gap: 14px;
}

body.marketplace-standalone-page .market-home-categories,
body.marketplace-standalone-page .market-home-account,
body.marketplace-standalone-page .market-home-rankings > article,
body.marketplace-standalone-page .market-home-product-section,
body.marketplace-standalone-page .market-home-stores,
body.marketplace-standalone-page .market-home-recommendations {
    border: 1px solid var(--ym-market-line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(31, 52, 82, .055);
}

body.marketplace-standalone-page .market-home-hero,
body.marketplace-standalone-page .market-home-hero-slide,
body.marketplace-standalone-page .market-home-hero-slide > img {
    height: clamp(282px, 23vw, 316px);
}

body.marketplace-standalone-page .market-home-hero-slide > div {
    left: 30px;
    width: min(520px, calc(100% - 60px));
    padding: 20px 22px;
    border-left: 3px solid #4ab7ff;
    border-radius: 7px;
    background: rgba(12, 29, 56, .72);
    box-shadow: 0 12px 24px rgba(4, 18, 41, .16);
}

body.marketplace-standalone-page .market-home-hero h1,
body.marketplace-standalone-page .market-home-hero h2 {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

body.marketplace-standalone-page .market-home-hero p {
    color: rgba(239, 247, 255, .9) !important;
}

body.marketplace-standalone-page .market-home-rankings {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
}

body.marketplace-standalone-page .market-home-rankings > article {
    height: auto;
    min-height: 438px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: #fff;
}

body.marketplace-standalone-page .market-home-rankings > article > header {
    min-height: 70px;
    padding: 13px 14px 10px;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

body.marketplace-standalone-page .market-home-rankings > article > header h2 {
    color: #1b2a41 !important;
    font-size: 15px;
    line-height: 20px;
}

body.marketplace-standalone-page .market-home-rankings > article > header small {
    display: block;
    margin-top: 3px;
    color: #7b899b !important;
    font-size: 10px;
}

body.marketplace-standalone-page .market-home-rankings > article > div {
    flex: 1;
    padding: 6px 14px 12px;
    overflow: visible;
}

body.marketplace-standalone-page .market-home-rankings > article > div > a {
    min-height: 56px;
    padding: 8px 0;
    grid-template-columns: 24px 38px minmax(0, 1fr);
    gap: 8px;
}

body.marketplace-standalone-page .market-home-rankings > article > div > a > b {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 10px;
}

body.marketplace-standalone-page .market-home-rankings > article > div > a img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: #edf3fa;
}

body.marketplace-standalone-page .market-home-rankings > article > div strong {
    color: #24344a !important;
    font-size: 12px;
    line-height: 17px;
}

body.marketplace-standalone-page .market-home-rankings > article > div small {
    color: #7a899c !important;
    font-size: 10px;
}

body.marketplace-standalone-page .market-home-rankings > article > div em {
    color: #df5c3f !important;
    font-size: 11px;
    font-style: normal;
}

body.marketplace-standalone-page .market-home-product-section,
body.marketplace-standalone-page .market-home-stores,
body.marketplace-standalone-page .market-home-recommendations {
    margin-top: 14px;
    background: #fff;
}

body.marketplace-standalone-page .market-home-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 0 14px 16px;
}

body.marketplace-standalone-page .market-home-product-card {
    min-height: 304px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(30, 55, 90, .035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.marketplace-standalone-page .market-home-product-card:hover,
body.marketplace-standalone-page .market-home-product-card:focus-visible {
    border-color: #9fc3f3;
    box-shadow: 0 10px 22px rgba(23, 105, 224, .12);
    transform: translateY(-2px);
}

body.marketplace-standalone-page .market-home-product-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: #edf3fa;
}

body.marketplace-standalone-page .market-home-product-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body.marketplace-standalone-page .market-home-product-cover-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    color: #fff;
    background: rgba(15, 35, 68, .72);
    font-size: 10px;
    line-height: 16px;
}

body.marketplace-standalone-page .market-home-product-cover > em {
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    background: #1769e0;
    font-size: 10px;
    font-style: normal;
}

body.marketplace-standalone-page .market-home-product-body {
    gap: 5px;
    padding: 11px 12px 13px;
}

body.marketplace-standalone-page .market-home-product-body > strong {
    min-height: 36px;
    color: #1b2a41 !important;
    font-size: 14px;
    line-height: 18px;
}

body.marketplace-standalone-page .market-home-product-body > small {
    color: #718096 !important;
    font-size: 11px;
}

body.marketplace-standalone-page .market-home-product-body > b {
    color: #df5138 !important;
    font-size: 16px;
    line-height: 20px;
}

body.marketplace-standalone-page .market-home-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 20px;
}

body.marketplace-standalone-page .market-home-product-tags > em {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 10px;
    font-style: normal;
    line-height: 17px;
    white-space: nowrap;
}

body.marketplace-standalone-page .market-home-product-tags > .is-type {
    color: #2467c5;
    border-color: #c4dafa;
    background: #f0f6ff;
}

body.marketplace-standalone-page .market-home-product-tags > .is-official {
    color: #12805c;
    border-color: #b8e5d3;
    background: #effbf5;
}

body.marketplace-standalone-page .market-home-product-tags > .is-recommended {
    color: #9b5d08;
    border-color: #f1d49b;
    background: #fff9eb;
}

body.marketplace-standalone-page .market-home-product-tags > .is-sales {
    color: #b14a39;
    border-color: #f1c6bd;
    background: #fff5f2;
}

body.marketplace-standalone-page .market-home-product-body > i {
    color: #8a97a8 !important;
    font-size: 10px;
    font-style: normal;
}

body.marketplace-standalone-page .market-home-stores > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 14px 16px;
}

body.marketplace-standalone-page .market-home-stores > div > a {
    min-height: 92px;
    border: 1px solid #e4eaf2;
    border-radius: 8px;
    background: #fbfdff;
}

body.community-modern-page .community-modern {
    width: min(1220px, calc(100% - 32px));
}

body.community-home-page .community-forum-header {
    min-height: 64px;
    padding: 0 14px;
    border-color: #d9e3ee;
    box-shadow: 0 5px 16px rgba(32, 61, 103, .07);
}

body.community-home-page .community-forum-header nav a {
    color: #4d5b6e !important;
    font-size: 13px;
}

body.community-home-page .community-forum-header nav a:hover,
body.community-home-page .community-forum-header nav a.is-active {
    color: #1769e0 !important;
}

body.community-home-page .community-modern-post h3 a,
body.community-home-page .community-modern-post-main > p,
body.community-home-page .community-modern-post-author,
body.community-home-page .community-modern-metrics {
    color: #45556b !important;
}

body.community-home-page .community-modern-post h3 a {
    color: #172033 !important;
}

@media (max-width: 1100px) {
    body.marketplace-standalone-page .market-home-page {
        width: min(100% - 32px, 1000px);
    }

    body.marketplace-standalone-page .market-home-first-screen {
        grid-template-columns: 214px minmax(0, 1fr);
    }

    body.marketplace-standalone-page .market-home-account {
        grid-column: 1 / -1;
    }

    body.marketplace-standalone-page .market-home-rankings,
    body.marketplace-standalone-page .market-home-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    body.marketplace-standalone-page .market-home-page {
        width: calc(100% - 24px);
    }

    body.marketplace-standalone-page .market-home-first-screen {
        grid-template-columns: 1fr;
    }

    body.marketplace-standalone-page .market-home-account {
        grid-column: auto;
    }

    body.marketplace-standalone-page .market-home-rankings,
    body.marketplace-standalone-page .market-home-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.marketplace-standalone-page .market-home-rankings,
    body.marketplace-standalone-page .market-home-product-grid,
    body.marketplace-standalone-page .market-home-stores > div {
        grid-template-columns: 1fr;
    }

    body.marketplace-standalone-page .market-home-rankings > article {
        height: auto;
        min-height: 0;
    }

    body.marketplace-standalone-page .market-home-hero-slide > div {
        left: 18px;
        width: calc(100% - 36px);
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marketplace-standalone-page .market-home-product-card {
        transition: none;
    }
}
