/**
 * 商品一覧・カテゴリ一覧（/products/）専用スタイル。
 * 元デザインは earth-healthy_statc_html の 02（全商品）・03（カテゴリ）の <style> を参照。
 * 他ページへ影響させないため、ルートは .eh-catalog にスコープする。
 */

/* ---- 横スクロールのカテゴリチップ行（モック 02 の .no-scrollbar 相当） ---- */
.eh-catalog .no-scrollbar::-webkit-scrollbar {
    display: none;
}
.eh-catalog .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ---- カテゴリページ左ナビ（モック 03 の .sidebar-link） ---- */
.eh-catalog .sidebar-link.active {
    font-weight: bold;
    border-left: 3px solid var(--earth-green, #4a7c59);
    padding-left: 13px;
    color: var(--earth-green, #4a7c59);
}
.eh-catalog .sidebar-link {
    border-left: 3px solid transparent;
    padding-left: 16px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.eh-catalog .sidebar-link:hover {
    color: var(--earth-green, #4a7c59);
}

/* ---- 一覧カード内画像：ホバー拡大は無効（scale だと object-contain でも周辺が切れて商品が判別しづらくなるため） ---- */
.eh-catalog .product-card img {
    transition: opacity 0.35s ease;
}
.eh-catalog .product-card:hover img {
    opacity: 0.92;
}

/* ---- カテゴリバッジ（02・03 のバッジ色） ---- */
.eh-catalog .badge-wpc {
    background-color: #e6eee7;
    color: #4a7c59;
}
.eh-catalog .badge-wpi {
    background-color: #e8eef5;
    color: #3d5a80;
}
.eh-catalog .badge-pea {
    background-color: #eef4e8;
    color: #5a7240;
}
.eh-catalog .badge-grassfed {
    background-color: #f8f3e9;
    color: #b08d57;
}
.eh-catalog .badge-soy {
    background-color: #f5f0e8;
    color: #8c7355;
}
.eh-catalog .badge-beauty {
    background-color: #fdeef4;
    color: #d16b9e;
}

/**
 * 一覧内フェードイン（site.js の IntersectionObserver が .visible を付与）。
 * migrated-static.css の .fade-in と併用されるが、商品一覧ではこちらのイージングを優先したい場合のみ定義。
 */
.eh-catalog .fade-in {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.eh-catalog .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- モバイル用 <details> フィルター（JS なしで開閉） ---- */
.eh-catalog .eh-catalog-mobile-filters > summary {
    list-style: none;
}
.eh-catalog .eh-catalog-mobile-filters > summary::-webkit-details-marker {
    display: none;
}