/*
 * すべて/ジャンル TOP。
 * モバイルファースト。--genre-color はジャンル TOP 時に .genre-top へ注入される。
 */

/* ===== 本文 (サイドバー + メイン) ===== */
.genre-top-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block: 24px;
}

/* カテゴリサイドバー (.genre-sidebar / .genre-section-title / .genre-empty / .category-*) は
 * 商品詳細と共有する `_partials/genre-sidebar.php` が使うため common.css にある。 */

/* ===== セクション ===== 商品カード (.product-card*) と .product-grid は複数ページ共有 partial
 * (_partials/product-card.php) のため common.css にある。 */

/* ===== 特集バナースライダー ===== 旧 index.php + jquery.imageslider.js 踏襲。
 * 本番実測: メイン枠 700x350 (2:1) を左、サブバナー 2x3 格子を右、下に「特集をもっと見る」。
 * 自動再生 6 秒・前後矢印・ドット。制御は /js/pages/genre-top.js (素の JS・CSP script-src 'self')。
 * モバイル/タッチは 1 カラム (メイン → ドット → サムネイル 2 列 x 3 行 → もっと見る。本番踏襲)。 */
.feature-slider {
    margin-bottom: 32px;
}

@media (width >= 1000px) {
    .feature-slider {
        display: grid;
        grid-template-columns: 700px 1fr;
        grid-template-areas:
            "stage thumbs"
            "dots  more";
        gap: 8px 16px;
        align-items: start;
    }

    .fs-stage {
        grid-area: stage;
    }

    /* サムネイルはメイン枠の右へ (列数 2 は基底で指定済み。本番も 2 列 x 3 行)。
     * margin-top: 0 は基底 .fs-thumbs (margin-top: 12px・ファイル後方) を上書きするため、
     * 親クラスを付けて詳細度を上げる。 */
    .feature-slider .fs-thumbs {
        grid-area: thumbs;
        margin-top: 0;
    }

    .fs-dots {
        grid-area: dots;
    }

    .fs-more {
        grid-area: more;
        margin-top: 0;
    }
}

.fs-stage {
    position: relative;
}

.fs-slides {
    position: relative;
    aspect-ratio: 2 / 1;
    min-height: 0;
    list-style: none;
    overflow: hidden;
    border-radius: 4px;
    background: #f5f5f5;
}

.fs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 500ms ease;
    pointer-events: none;
}

.fs-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* リンクはスライド全面を覆う。inline のままだと画像未読込時に alt テキスト幅しかクリックできず、
 * 画像読込後も余白 (object-fit: cover の外側) が押せない。ブロック化して全面をリンクにする。 */
.fs-slide a {
    display: block;
    height: 100%;
}

.fs-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 矢印グリフ (‹ / ›) の中央寄せは flex で行う。button の UA 既定 text-align:center は
 * destyle.css が inherit に戻すため、指定しないとグリフが左端に張り付く。 */
.fs-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    background: rgb(0 0 0 / 40%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.fs-arrow:hover {
    background: rgb(0 0 0 / 60%);
}

.fs-arrow-prev {
    left: 8px;
}

.fs-arrow-next {
    right: 8px;
}

.fs-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.fs-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.fs-dot.is-active {
    background: var(--genre-color, #9c8b5e);
}

.fs-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
    list-style: none;
}

.fs-thumb {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
}

.fs-thumb.is-active {
    border-color: var(--genre-color, #9c8b5e);
}

.fs-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: 0;
    object-fit: cover;
}

.fs-more {
    margin-top: 16px;
    text-align: right;
}

/* ===== ご注文ルール案内バナー ===== 特集スライダーの下。PC=横帯 (1280x211) と
 * SP=2x2 (640x600) の別画像を <picture> で切替 (高さは各比率で確保し CLS を防ぐ)。
 * 帯に背景色は敷かない。画像自身が背景を持つため、ページ背景の上に
 * 上下 16px の余白だけを取り、画像は内側 .container でコンテナ幅・中央寄せにする。 */
.tasucall-rule {
    padding: 16px 0;
}

.tasucall-rule-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 600;
}

@media (width >= 1000px) {
    .tasucall-rule-img {
        aspect-ratio: 1280 / 211;
    }
}

.genre-section {
    margin-bottom: 32px;
}

/* 「もっと見る>」(旧 #sale_more / #ranking_more 踏襲。セクション右下の金ピルボタン) */
.genre-section-more {
    margin-top: 16px;
    text-align: right;
}

/* お知らせ枠だけは中央寄せ (旧 index.php の div.footer)。旧は同じ画面でも
 * セクションごとに寄せを変えており、コラム枠は右寄せのまま。 */
.genre-section-more-centered {
    text-align: center;
}

/* `.genre-more-button` は共有 partial `_partials/promotion-block.php` が複数画面で使うため
 * common.css にある。 */

/* ===== お知らせ ===== 旧 index.php の .info .info_list 踏襲。
 * 本番実測: 行高 40px / 下線 1px solid rgb(158,158,158) / 文字 14.4px /
 * 日付は内容幅 96px + 左右 padding 8px (content-box)・色 rgb(153,126,93) /
 * タイトルは幅 822px 固定で ellipsis の 1 行省略 (一覧ページは幅指定なしで省略しない)。
 * 行は行ごと押せる操作子 (<button>) で、クリックでお知らせポップアップを開く。 */
.genre-section .info-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.genre-section .info-row {
    border-bottom: 1px solid #9e9e9e;
}

.genre-section .info-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
}

.genre-section .info-date {
    box-sizing: content-box;
    flex-shrink: 0;
    width: 96px;
    padding: 0 8px;
    color: #997e5d;
}

/* タイトルは 1 行省略。旧は幅 822px 固定だが、新の本文幅はコンテナ由来で可変のため
 * 残り幅いっぱい (flex:1) を使い、あふれたら省略する形で同じ見え方にする。 */
.genre-section .info-title {
    box-sizing: content-box;
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== コラム ===== 旧 index.php 踏襲。本番実測: カード 200x250px・
 * 間隔 32px・タイトルオーバーレイ rgba(0 0 0 / 50%)・白 14.4px・日付 bold・背景 cover 中央。
 * 見出しは既存 genre-section パターンに合わせ、カード内部を本番基準にする。 */
.column-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.column-item {
    aspect-ratio: 4 / 5; /* 本番 200x250 の比率 */
}

.column-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #eee;
    background-position: center;
    background-size: cover;
}

.column-caption {
    position: absolute;
    inset: auto 0 0;
    padding: 7px 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #fff;
    background: rgb(0 0 0 / 50%);
}

.column-date {
    display: block;
    font-weight: 700;
}

/* ===== レビュー (U-KOMI) ===== 中身は外部 widget が描画するため枠の余白のみ。 */
.genre-review {
    min-height: 0;
}

/* ===== PC (>= 1000px) ===== */

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

    .genre-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .column-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}