/* /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;
}

.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;
}

/* 一覧カードの数量ステッパー「− 数 ＋」。常時表示・色なし（白地にグレー枠）。
   カートに入っている商品は数字の背景だけ薄くする。ec/ec_static/js/cart_stepper.js */
.qtyStep {
    display: flex;
    height: 40px;
    border: 1px solid #cfd0d8;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.qtyStep__btn {
    flex: 0 0 42px;
    border: none;
    background: #fff;
    color: var(--color-black);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.qtyStep__btn:disabled {
    color: #c4c4cc;
    cursor: default;
}

.qtyStep__value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    font-family: var(--font-number);
    font-size: 1.6rem;
    font-weight: 800;
}

.qtyStep__value.is-in {
    background: #f1f2f8;
}

.qtyStep.is-loading {
    opacity: 0.6;
}

.cardFilters {
    margin: 0 0 16px;
}

/* 折り返す（横スクロールだとスマホで右端の 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;
}

/* PC はカードを小さくして 1 画面に多く並べる（768px 以上の 3 列は style.css）。
   1024px 以上で 4 列、1400px 以上で 5 列。スマホの 2 列は変えない */
@media (min-width: 1024px) {
    .l-layout .card {
        width: 23.5%;
        margin-right: 2%;
    }

    .l-layout .card:nth-child(3n) {
        margin-right: 2%;
    }

    .l-layout .card:nth-child(4n) {
        margin-right: 0;
    }

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

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

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

@media (min-width: 1400px) {
    .l-layout .card {
        width: 18.4%;
    }

    .l-layout .card:nth-child(4n) {
        margin-right: 2%;
    }

    .l-layout .card:nth-child(5n) {
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .cardFilters__chips {
        flex-wrap: wrap;
        overflow: visible;
    }

    /* PC 幅では列を広げすぎない（件数がラベルから離れて読みにくい） */
    .cardFilters__options {
        grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
    }

    .cardFilters__options--list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
    }
}