/* ================  共通レイアウト  ================ */
.category-wrapper {
    padding-top: 40px;
}

.category-ec-block {
    border-top: 1px solid #e0e0e0;
}

.js-category-grid {
    display: flex;
    flex-direction: column;   /* 親カテゴリを縦一列に */
    width: 180px;
}

/* レイアウト —— flex のままで OK */
#js-category-blocks {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
}

.category-box {
    position: relative;
    width: 180px;
    padding: 1rem;
    background: #fff;
    justify-content: center;
}

.category-box > ul li {
    padding: 4px 0;
}

/* ================  親カテゴリ BOX  ================ */
.category-box {
    position: relative;             /* 子ULの絶対配置基準 */
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .2s;
}

.category-box > ul {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 360px;
    padding: 16px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    display: none;
    z-index: 1100;
}

.category-box:hover > ul,
.category-box:focus-within > ul {
    display: grid;
}

.category-box:hover,
.category-box:focus-within {
    background: #20A4EC;
}

/* --- リスト --- */
.category-box:hover > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-height: 50vh;
    overflow: scroll;
}

/* ===== 子カテゴリ <li> をカード風に ===== */
.category-box ul li {
    /* ボックス化 */
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-height: 38px;              /* ★ 高さを確保（お好みで） */
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fdfdfd;

    font-size: var(--hamburger-font-size);
    font-weight: 500;
    color: #333;
    text-decoration: none;         /* 下線を消す（PC 時） */
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .2s;
}

/* 最後の li は余白を取らない */
.category-box ul li:last-child {
    margin-bottom: 0;
}

/* ホバー／フォーカス時にアクセント */
.category-box ul li:hover,
.category-box ul li:focus {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transform: translateY(-1px);
    color: #20A4EC;               /* 文字色も親と合わせて赤系に */
}
.category-box:nth-child(odd) {
    background-color: #f2f2f2 !important; /* 奇数番目 白 */
}
.category-box:nth-child(even) {
    background-color: #fafafa !important; /* 偶数番目 グレー */
}
.category-box:hover,
.category-box:focus-within {
    background: #20A4EC !important;
}

/* スマホ ≤560px —— 行間が詰まり過ぎるのを防ぐ */
@media (max-width: 560px) {
    .category-menu-header {
        font-size: 20px !important;
        padding: 16px !important;
        background-color: #2086ec;
    }

    .category-box ul li {
        min-height: 44px;
        font-size: var(--hamburger-font-size);
        width: 100%;
    }
}

.category-box:hover h3,
.category-box:focus-within h3 {
    color: #fff;
}

.category-box img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-right: 8px;
    order: -1;                /* マークアップ順に関わらず左側へ */
    pointer-events: none;
}

/* 大カテゴリヘッダー用スタイル */
.category-header {
    display: flex;
    align-items: center;
    width: 100%;
}

.category-header-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-right: 8px;
    border-radius: 6px;
    pointer-events: none;
}

.category-box h3 {
    margin: 0;
    font-size: var(--hamburger-font-size);
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    pointer-events: none;
}

.category-box ul li {
    font-size: var(--hamburger-font-size);
    text-decoration: underline;
    cursor: pointer;
}

/* ================  PC (>560px)  ================ */
@media (min-width: 561px) {
    .category-ec-block {
        display: flex;
        justify-content: space-between;
    }
    .category-ec-block-left {
        padding-top: 16px;
    }
    .category-ec-block-right {
        width: 80%;
    }
}

/* ================  スマホ (≤560px)  ================ */
@media (max-width: 560px) {
    .category-wrapper {
        flex-direction: column;
        padding: 40px 20px 70px;
    }
    .js-category-grid {
        flex-direction: row;          /* 親カテゴリを横スクロール */
        width: 100%;
        border-right: none;
        position: relative;           /* ul の基準 */
        z-index: 1000;
        justify-content: center;
    }
    .category-box {
        align-items: center;
        justify-content: center;
        min-width: 120px;
        padding: 16px;
        background: transparent;
        width: 100%;
        gap: 8px;
        border: 0.5px white solid;
    }
    .category-box h3 {
        text-align: center;
        color: #333;
        font-size: 20px;
    }

    /* 大カテゴリヘッダー画像はスマホでも表示 */
    .category-header {
        gap: 8px;
        justify-content: center;
        margin-right: 16px;
    }

    .category-header-img {
        width: 60px;
        height: 60px;
        margin-right: 0;
        margin-bottom: 4px;
        display: block;
    }
    /* 子カテゴリ UL：親ボックスの下にドロップダウン */
    .category-box ul {
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 60vh;
        min-width: unset;
        margin: 0;
        padding: 8px 8px 12px;
        box-shadow: 0 4px 8px rgba(0,0,0,.15);
    }

    /* 商品ブロックは 1 つ下のレイヤー */
    .category-ec-block-right {
        position: relative;
        z-index: 1;
    }
}

/* li 内部は a を縦並びカラム化して制御する（既存liのflexは活かしつつ上書き） */
.category-box ul li a {
    display: flex;
    flex-direction: column;     /* 縦並び */
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: center;
    text-decoration: none;      /* 下線を消す */
    color: inherit;             /* 既存の色指定を継承 */
}

/* 画像サイズ・余白 */
.category-box ul li a img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 0 6px;            /* 画像の下に余白 */
    display: block;
    pointer-events: none;
    border-radius: 6px;
}

/* ラベル */
.category-box ul li a .cat-label {
    display: block;
    font-size: var(--hamburger-font-size);
    line-height: 1.4;
}

/* 既存の「テキストに下線」指定を無効化（縦カードでは不要） */
.category-box ul li,
.category-box ul li a {
    text-decoration: none;
}

/* ホバー時の演出は既存に追随しつつ、リンク全体に適用されるよう補助 */
.category-box ul li:hover a,
.category-box ul li:focus-within a {
    color: #20A4EC;             /* 既存のhover色と合わせる */
}

/* スマホ時もサブメニュー画像は表示（親カテゴリの img 非表示ルールと衝突しないよう限定） */
@media (max-width: 560px) {
    .category-box ul li a img {
        width: 64px;
        height: 64px;
    }
}