/* =============================================
   GEAL Listing Page (タイムセール / 新着 / お気に入り / 閲覧履歴 / 寄付先)
   -------------------------------------------------------------
   2026-07-28: 一覧系ページが「画面中央に小さく固まる」「PC の横幅が余る」状態だったため、
   共通のフル幅レイアウトとして新設。見出しはサブバー直下の左上に置き、
   商品はカテゴリごとのセクションに束ねる。
   ============================================= */

.listing-page {
    width: 100%;
    max-width: var(--geal-max-width-wide, 1600px);
    margin: 0 auto;
    padding: 0 16px 96px;
    box-sizing: border-box;
    min-height: 70vh;
}

/* --- ページ見出し（左上・サブバー直下） --- */
.listing-page__head {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0 12px;
}

.listing-page__title {
    margin: 0;
    font-family: var(--font-serif, serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--geal-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.listing-page__title i,
.listing-page__title svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.listing-page__count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--geal-text-muted, #6b7280);
    font-family: var(--font-num, sans-serif);
}

.listing-page__lead {
    width: 100%;
    margin: 0;
    font-size: 0.85rem;
    color: var(--geal-text-muted, #6b7280);
}

/* --- フィルタ行（GEAL/Circular 等のチップ） --- */
.listing-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 12px;
}

/* --- カテゴリバー（buyer-dashboard と同じ GealCategoryUI を流用） --- */
.listing-page .category-filter-bar {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.listing-page .category-filter-scroll {
    min-height: 68px;
}

/* --- カテゴリごとのセクション --- */
.listing-section {
    margin: 0 0 28px;
}

.listing-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 8px;
    border-bottom: 1px solid var(--geal-border-light, rgba(0, 0, 0, 0.08));
}

.listing-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--geal-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.listing-section__title i,
.listing-section__title svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.listing-section__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--geal-text-muted, #6b7280);
    font-family: var(--font-num, sans-serif);
    flex-shrink: 0;
}

/* --- グリッド（.favorites-grid と同じ auto-fill 規則） --- */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    padding: 12px 0 0;
}

.listing-grid .info-card {
    width: 100%;
    margin-bottom: 0;
}

/* --- 空状態 --- */
.listing-page .empty-state {
    text-align: center;
    padding: 56px 20px;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .listing-page {
        padding: 0 12px 96px;
    }

    .listing-page__head {
        padding: 14px 0 8px;
        gap: 8px;
    }

    .listing-page__title {
        font-size: 1.15rem;
    }

    .listing-page__title i,
    .listing-page__title svg {
        width: 18px;
        height: 18px;
    }

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

    .listing-section {
        margin-bottom: 20px;
    }
}

@media (max-width: 359px) {
    .listing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}