/* /cards（カテゴリ一覧・検索結果）専用。ec/templates/ec/products/cardlist.html の extra_styles で読む。
   絞り込みチップ（ec/templates/ec/products/_card_filters.html）。ルートの文字サイズは 10px（rem 注意） */

/* 一覧カードの商品名は「カード名」＋ 2 行目「SAR · 227/187 · SV8A」。style.css の
   .card__info__name は 2 行ぶん（48px）を確保するが、カード名は 1 行が多いので空きを作らない */
.l-card .card__info__name {
    min-height: 0;
    /* カード名は太字（semibold）、2 行目の型番・弾（.card__info__meta）はグレーの小さい字で差を付ける */
    font-weight: 600;
}

.card__info__meta {
    margin: 2px 0 6px;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardFilters {
    margin: 0 0 16px;
}

/* PC の列だけに出す見出し行（スマホはチップが見出し） */
.cardFilters__head {
    display: none;
}

/* 折り返す（横スクロールだとスマホで右端の Sort が「So」で切れて押せることに気づかれない） */
.cardFilters__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
}

.cardFilters__chipWrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.cardFilters__chipWrap--sort {
    margin-left: auto;
}

.cardFilters__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #cfd0d8;
    border-radius: 999px;
    background: #fff;
    color: var(--color-black);
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cardFilters__chip.is-on {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.cardFilters__chip[aria-expanded="true"] {
    border-color: var(--color-primary);
}

.cardFilters__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

/* 条件を消す ×。選択中のチップは「Set: M6A ▾ | ×」の 1 つの塊（左側がチップ・右側が ×）にする */
.cardFilters__chipWrap.is-active .cardFilters__chip {
    border-radius: 999px 0 0 999px;
    padding-right: 10px;
}

.cardFilters__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 34px;
    border: 1px solid var(--color-primary);
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0 999px 999px 0;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;
}

/* Raw / PSA の切替 */
.cardFilters__seg {
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
}

.cardFilters__segItem {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.cardFilters__segItem.is-on {
    background: var(--color-primary);
    color: #fff;
}

.cardFilters__panel {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #e0e0e8;
    border-radius: 10px;
    background: #fff;
}

.cardFilters__panel[hidden] {
    display: none;
}

.cardFilters__panelTitle {
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 800;
}

/* minmax(0, 1fr): 1fr だけだと列が中身（nowrap のレアリティ名）より縮まず、スマホで
   件数がパネルの外にはみ出してページごと横にずれる */
.cardFilters__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
}

/* 送信中（JS 無しの再読み込み待ち）は二重操作を防ぐ。is-updating は JS の読み直し中 */
.cardFilters.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.cardFilters.is-updating .cardFilters__count {
    opacity: 0.5;
}

.cardFilters__clear[hidden],
.cardFilters__panelFoot[hidden] {
    display: none;
}

/* 価格の下限・上限（円）。Apply か Enter で確定 */
.cardFilters__range {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cardFilters__rangeField {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 110px;
    max-width: 160px;
}

.cardFilters__rangeLabel {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.cardFilters__rangeInput {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #cfd0d8;
    border-radius: 6px;
    font-family: var(--font-number);
    font-size: 1.4rem;
}

.cardFilters__rangeDash {
    padding-bottom: 10px;
    color: var(--color-text-muted);
}

/* .btnPrimar は width: 100% / height: 44px が基底。入力欄の横に置く小さなボタンにする */
.cardFilters__range .btnPrimar.cardFilters__apply {
    width: auto;
    height: 36px;
    padding: 0 16px;
    font-size: 1.2rem;
}

/* 弾の一覧は長いので 1 列・高さを抑えてスクロール */
.cardFilters__options--list {
    grid-template-columns: 1fr;
    max-height: 260px;
    overflow-y: auto;
}

.cardFilters__option {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 28px;
    font-size: 1.3rem;
    cursor: pointer;
}

/* style.css の reset は input[type=checkbox] / [type=radio] を display: none にしている
   （画面ごとに独自の見た目を作る前提）。ここは OS 標準のチェックボックスで十分 */
.cardFilters__option input {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
    accent-color: var(--color-primary);
}

.cardFilters__optionKey {
    font-weight: 700;
}

.cardFilters__optionName {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardFilters__optionCount {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 1.2rem;
}

.cardFilters__panelFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.cardFilters__link {
    border: none;
    background: none;
    padding: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.cardFilters__count {
    margin: 8px 0 0;
    color: var(--color-text-muted);
    font-size: 1.2rem;
}

/* ---- 一覧の列（grid）。style.css の .l-layout .card（width % と nth-child の margin）は使わない。
   id で勝たせる。スマホ 2 列はそのまま、PC は 1 枚を小さくして多く並べる。
   左に絞り込みの列があるとき 768px: 3 / 1024px: 4 / 1200px: 5、
   無いとき（未開封の一覧・.l-layout--full）は 4 / 5 / 6 ---- */
#card-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    /* 絞り込みの読み直し中は JS が min-height で前の高さを保つ（cardlist.html applyFilters）。
       grid は既定（align-content: normal = stretch）だと余った高さを行に配るので、件数が減ると
       カードが縦に伸びて価格とボタンの間が空く。行は上から詰め、余りは空けておく */
    align-content: start;
}

#card-results > .card {
    width: auto;
    margin: 0;
}

/* シングル・PSA の写真は 5:7。枠も 5:7 にして左右の空きを無くす（style.css は正方形） */
.l-card--portrait .card__info__img {
    padding-top: 140%;
}

/* 1 枚の余白を詰める（style.css は PC で 20px） */
#card-results .card__info__wrap {
    padding: 10px;
}

#card-results .card__info__btn {
    padding-top: 8px;
}

/* ---- 絞り込みの列 ---- */
/* style.css は 767px 以下で .l-sideMenu を display: none（旧カテゴリ木）。絞り込みはスマホでも出す */
.l-sideMenu--filters {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    background: none;
}

.l-section .l-sideMenu--filters {
    min-height: 0;
}

/* ---- PC（768px 以上）。絞り込みは左の列、一覧は 3 列から ---- */
@media (min-width: 768px) {
    #card-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .l-layout--full #card-results {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .l-card .card__info__name {
        font-size: 1.4rem;
    }

    .l-card .card__info__price {
        font-size: 1.5rem;
    }

    .l-card .qtyStep {
        height: 36px;
    }

    /* 絞り込みの列: 固定（sticky）にしない。ページと一緒に流れ、列の中だけが
       別にスクロールすることが無いようにする（弾の一覧だけは 260px で中スクロール） */
    .l-sideMenu--filters {
        width: 22%;
        margin-bottom: 0;
    }

    .l-layout .l-sideMenu--filters + #card-results {
        width: 76%;
    }

    .cardFilters__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .cardFilters__title {
        font-size: 1.6rem;
        font-weight: 800;
    }

    .cardFilters__clearAll {
        color: var(--color-primary);
        font-size: 1.2rem;
        font-weight: 700;
        text-decoration: none;
    }

    .cardFilters__clearAll[hidden] {
        display: none;
    }

    /* チップの行を解き、見出し（チップ）→ パネルの順に縦に並べる。
       DOM はチップ行 → パネル群の順なので order で組み替える */
    .cardFilters {
        display: flex;
        flex-direction: column;
    }

    .cardFilters__chips {
        display: contents;
    }

    .cardFilters__seg {
        order: 1;
        align-self: flex-start;
        margin-bottom: 10px;
    }

    .cardFilters__chipWrap {
        display: flex;
        width: 100%;
    }

    .cardFilters__chipWrap--sort {
        margin-left: 0;
    }

    .cardFilters__chipWrap--rarity { order: 2; }
    .cardFilters__panel[data-facet-panel="rarity"] { order: 3; }
    .cardFilters__chipWrap--set { order: 4; }
    .cardFilters__panel[data-facet-panel="set"] { order: 5; }
    .cardFilters__chipWrap--price { order: 6; }
    .cardFilters__panel[data-facet-panel="price"] { order: 7; }
    .cardFilters__chipWrap--sort { order: 8; }
    .cardFilters__panel[data-facet-panel="sort"] { order: 9; }
    .cardFilters__count { order: 10; }

    /* チップ → 見出し。丸い枠と塗りをやめ、左寄せの太字と右端の ▾ にする */
    .cardFilters__chip,
    .cardFilters__chipWrap.is-active .cardFilters__chip {
        flex: 1 1 auto;
        justify-content: space-between;
        height: 38px;
        padding: 0 4px;
        border: none;
        border-top: 1px solid #e0e0e8;
        border-radius: 0;
        background: none;
        color: var(--color-black);
        font-size: 1.3rem;
        font-weight: 800;
        white-space: normal;
        text-align: left;
    }

    .cardFilters__chip.is-on {
        color: var(--color-primary);
    }

    .cardFilters__chip[aria-expanded="true"] .cardFilters__caret {
        transform: rotate(180deg);
    }

    .cardFilters__clear {
        width: 28px;
        height: 28px;
        align-self: center;
        border: none;
        border-radius: 50%;
        background: #eef0f6;
        color: var(--color-black);
        font-size: 1.4rem;
    }

    /* パネルは常に開く（hidden は JS の開閉用でスマホだけ）。折り畳みは is-collapsed */
    .cardFilters__panel,
    .cardFilters__panel[hidden] {
        display: block;
        margin: 0 0 10px;
        padding: 0 4px 6px;
        border: none;
        border-radius: 0;
    }

    .cardFilters__panel.is-collapsed {
        display: none;
    }

    .cardFilters__panelTitle {
        display: none;
    }

    /* 列が細いので選択肢は 1 列（スマホの 2 列・弾の 1 列を両方ここで上書き） */
    .cardFilters__options,
    .cardFilters__options--list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .cardFilters__rangeField {
        flex: 1 1 70px;
    }

    .cardFilters__range .btnPrimar.cardFilters__apply {
        flex: 1 1 100%;
    }
}

@media (min-width: 1024px) {
    #card-results {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .l-layout--full #card-results {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    #card-results {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .l-layout--full #card-results {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}