/*
 * カテゴリ別商品一覧 / 新商品一覧。
 * 骨格 (サイドバー + ツールバー + カードグリッド + ページング) が同一のため 2 画面で共有する。
 * `.cl-` はカテゴリ一覧由来の接頭辞だがカテゴリ専用ではない (新商品一覧も使う)。
 * モバイルファースト。--genre-color はジャンル TOP と同様、当該ジャンルのテーマ色を
 * .category-list に注入する (見出し下線・チップ hover のアクセント)。
 * 商品カードグリッド (.product-grid / .product-card*)、一覧ツールバー (.cl-toolbar 等)、
 * ページネーション (.pagination*) は common.css の共有スタイルを使う。
 */
.category-list {
    /* .site-main 上パディングを打ち消し、パンくず帯をヘッダ直下へ (旧 body_header 踏襲) */
    margin-top: calc(-1 * var(--shop-main-pad-block));
    padding-block: 0 32px;
}

/* ===== パンくず (旧: ヘッダ直下の全幅グレー帯 #f2f2f2。テキストは中央 container) ===== */
.cl-breadcrumb {
    margin-bottom: 24px;
    padding-block: 10px;
    background: var(--shop-head-bg);
    font-size: 0.8rem;
    color: var(--shop-muted);
}

.cl-breadcrumb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.cl-breadcrumb-item {
    color: var(--shop-muted);
    text-decoration: none;
}

.cl-breadcrumb-item:hover {
    color: var(--genre-color);
    text-decoration: underline;
}

.cl-breadcrumb-item[aria-current="page"] {
    color: var(--shop-text);
    font-weight: 700;
    pointer-events: none;
}

.cl-breadcrumb-sep {
    color: #bbb;
}

/* ===== レイアウト (カテゴリサイドバー + 本文) ===== サイドバー自体の表示可否は共有
 * .genre-sidebar が PC かつホバー端末でのみ表示 (common.css)。旧 item_page.php の左「カテゴリから
 * 探す」踏襲。 */
.cl-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cl-content {
    min-width: 0; /* grid/flex 子のはみ出し防止 */
}

/* 横並びに切り替える条件は `.genre-sidebar` の表示条件と揃える (幅だけでなくホバー可否も見る)。
 * 揃えないと、幅 1000px 以上のホバー不可端末で「横並びだがサイドバーは order:2・幅指定なし」となり、
 * 販促ブロックが本文の右の細い列に出て本文幅も縮む。 */
@media (width >= 1000px) and (hover: hover) {
    .cl-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .cl-content {
        flex: 1 1 auto;
    }
}

/* ===== 見出し ===== 本番実測踏襲 (旧 div.s_name): 左寄せ・24px・4px double の下線 */
.cl-head {
    padding: 20px 10px;
    margin-bottom: 16px;
    border-bottom: 4px double #9e9e9e;
}

.cl-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: #434343;
}

/* 見出しの英字ラベル (新商品一覧の "New item"・旧 item_new.php の <label> 踏襲)。
 * 特売/ランキング一覧の .gl-title-alias とフォント指定が同値 (0.8rem / #9e9e9e / 1px) */
.cl-title-alias {
    font-size: 0.8rem;
    color: #9e9e9e;
    letter-spacing: 1px;
}

/* 新商品一覧の見出しは中央寄せ。
 * 旧 item_new.php の見出しは `.title` (実測 text-align:center / padding:20px 0) で、
 * 旧カテゴリ一覧の見出し `.s_name` (実測 text-align:start / padding:20px 10px) とは別クラス。
 * 基底の .cl-head は後者を再現しているため、こちらはモディファイアで上書きする
 * (特売/ランキング一覧の .gl-head も旧 `.title` 由来で中央寄せ・新システム内でも揃う) */
.cl-head-centered {
    padding-inline: 0;
    text-align: center;
}

/* 見出し直下の注記 (「いつもの」の対象期間の説明)。罫線の内側に置くため .cl-head の中に入れる。
 * 本文と同じ 16px・見出しに合わせて中央寄せ (.cl-head-centered が親で効く)。 */
.cl-head-note {
    margin-top: 8px;
    font-size: 1rem;
    color: var(--shop-text);
}

/* カテゴリ内でよく売れている商品 (旧 item_page.css `section#popular_items`)。
 * 見出しの箱・カードグリッドは一覧と共有し、この画面差分は上の余白と見出し色だけ。
 * 列数は一覧と同じ .product-grid に揃える (旧は一覧 4 列に対しここだけ 3 列だったが、
 * 新は同じ幅のカードが上下に並ぶ方が繋がって見えるため踏襲しない)。 */
.cl-popular {
    margin-top: 60px;
}

.cl-head-popular .cl-title {
    color: #296693;
}

/* カテゴリ説明 (見出しの罫線より下)。上の余白は .cl-head の margin-bottom が担う */
.cl-note {
    padding-inline-start: 10px; /* 見出しの左 padding に合わせる */
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--shop-muted);
}

/* 絞り込みチップ (.cl-subcats / .cl-chip / .cl-chip-count)・ツールバー (.cl-toolbar / .cl-field /
 * .cl-select / .cl-stock*)・適用状態バー (.cl-resultbar*)・ページネーション (.pagination*) は
 * 特集商品一覧・商品詳細とも共有するため common.css にある。 */

.cl-empty {
    padding: 32px 0;
    color: var(--shop-muted);
    text-align: center;
}

/* ===== PC (>= 1000px) ===== */
@media (width >= 1000px) {
    .category-list {
        padding-block: 0 40px;
    }

    .cl-title {
        font-size: 1.5rem;
    }
}