.seller-store {
    min-height: 100vh;
    /* [2026-08-08] 目的：原本是偏冷調的灰（#f6f7f8），跟Hero的墨黑+印刷紅完全對不上；
    改成跟Hero同一套暖色調的紙白，讓整頁看起來是同一個設計，不是Hero跟商品區各自一套風格。 */
    background: #f1efea;
    color: #17140f;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}

.seller-store * {
    box-sizing: border-box;
}

/* [2026-08-08] 目的：改用「型錄跨頁 Lookbook」方向——固定banner圖鋪滿Hero、深色漸層讓左側文字
可讀、右側維持照片本身。賣場尚未開放自訂banner，全站先共用一張圖（SellerStore.aspx.cs 的
DefaultSellerBannerUrl），之後有賣家自己的 BannerUrl 就會自動換成賣家自己的圖，這裡不用再改。 */
.seller-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    background-color: #17140f;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.seller-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(23, 20, 15, .86) 0%, rgba(23, 20, 15, .58) 42%, rgba(23, 20, 15, .18) 78%);
}

.seller-hero-body {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 64px 0;
}

.seller-kicker {
    color: #ff8a6b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.seller-hero-copy {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.seller-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.18;
}

.seller-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.8;
}

.seller-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 8px;
    min-width: 150px;
    height: 46px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 999px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.seller-primary-link:hover {
    background-color: #ffffff;
    color: #17140f;
}

/* [2026-08-08] 目的：「全部商品」是商品區起點的標記，字級維持正常閱讀比例（不用刻意縮小），
放在Hero下緣的深色收尾條，當作照片區到商品區之間的視覺轉場。 */
.seller-hero-foot {
    background-color: #17140f;
    border-top: 1px solid #332e27;
}

.seller-hero-foot-inner {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 18px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.seller-hero-foot-inner h2 {
    margin: 0;
    color: #f1efea;
    font-size: 20px;
}

.seller-hero-foot-inner em {
    color: #9c9488;
    font-size: 13px;
    font-style: normal;
}

/* [2026-08-08] 目的：參考 hochoo-home.com 的商品列表——沒有卡片外框、左右間距窄、上下間距寬，
文字安靜（品名細字重、價格用低調暗紅而不是飽和紅）。維持4欄（我們沒有側邊選單佔寬度，4欄比照他們
「有選單才3欄」的邏輯換算回來剛好）。column-gap故意留小，讓同一排商品視覺上連成一條；
row-gap留大，讓排與排之間有明顯呼吸空間，這才是「慵懶感」的來源，不是靠拼圖或瀑布流。 */
.seller-product-grid {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 56px;
}

.seller-product-card {
    overflow: hidden;
    color: #17140f;
    text-decoration: none;
}

.seller-product-card figure {
    margin: 0;
    aspect-ratio: 1 / 1;
    background: #ece7dc;
    overflow: hidden;
}

.seller-product-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.82) contrast(1.02);
    transition: filter .25s ease;
}

.seller-product-card:hover img {
    filter: saturate(1) contrast(1);
}

.seller-product-empty-img {
    display: grid;
    place-items: center;
    color: #a49c8d;
    font-size: 26px;
    font-weight: 800;
}

/* [2026-08-08] 目的：文字貼近圖片（縮小上方間距）、置中、字距拉開一點點做出秀氣感——
row-gap本身已經很大，文字越靠近圖片，排跟排之間的大留白才會更突顯，呼吸感才出得來。 */
.seller-product-card div {
    padding: 8px 6px 0;
    text-align: center;
}

.seller-product-card h3 {
    margin: 0 0 5px;
    color: #4a4237;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.5;
}

.seller-product-card p {
    margin: 0;
    color: #9c3222;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

.seller-empty {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto 72px;
    background: #ffffff;
    border: 1px dashed #cbb8a4;
    border-radius: 4px;
    padding: 64px 24px;
    text-align: center;
}

.seller-empty--page {
    margin-top: 80px;
}

.seller-empty h1,
.seller-empty h2 {
    margin: 0 0 10px;
    color: #17140f;
}

.seller-empty p {
    margin: 0 0 22px;
    color: #6b655c;
}

.seller-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 44px;
    border-radius: 999px;
    background: #17140f;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 1080px) {
    .seller-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .seller-hero-body,
    .seller-hero-foot-inner,
    .seller-product-grid,
    .seller-empty {
        width: min(100% - 28px, 1320px);
    }

    .seller-hero {
        min-height: 0;
    }

    .seller-hero-body {
        padding: 40px 0;
    }

    .seller-hero h1 {
        font-size: 32px;
    }

    .seller-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .seller-product-grid {
        grid-template-columns: 1fr;
    }
}