/* =====================================================
    GRID (画像幅を確保するため3列に設定)
===================================================== */
#item_list > .row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px 24px; /* 上下左右の余白 */
    margin: 0 !important;
    justify-content: flex-start; /* 左寄せ */
}

/* 【追加】Bootstrap 3のclearfix（擬似要素）がFlexアイテムとして計算されるのを防ぐ */
#item_list > .row::before,
#item_list > .row::after {
    display: none !important;
}

/* 【修正】端数による段落ちを防ぐため、厳密なcalc計算に変更 */
.product_item_wrapper {
    box-sizing: border-box;
    /* (全体の幅100% - 余白24px × 2箇所) ÷ 3列 */
    width: calc((100% - 48px) / 3); 
}

@media (max-width: 1024px) { 
    .product_item_wrapper { 
        /* (全体の幅100% - 余白24px × 1箇所) ÷ 2列 */
        width: calc((100% - 24px) / 2); 
    } 
} 

@media (max-width: 600px) { 
    .product_item_wrapper { 
        width: 100%; 
    } 
}