/* =========================================================================
   サイト全体のモノクロ化 ＆ 特定画像カラー化カスタマイズ (ヘッダーモノクロ対応)
   ========================================================================= */

/* 1. 既存のhtmlへのフィルターを解除 */
html {
    filter: none !important;
}

/* 2. 画面全体を覆うモノクロレイヤーを配置 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: grayscale(100%) !important;
    -webkit-backdrop-filter: grayscale(100%) !important;
    pointer-events: none;
    z-index: 9999 !important;
}

/* 3. 【TOPページ】商品画像スライダーをカラーにする */
.product-image-slider-wrap {
    position: relative !important;
    z-index: 10000 !important;
}

/* 4. 【一覧画面】ソース画像カードを前面にしてカラーにする */
.twostep-sauce-card {
    position: relative !important;
    z-index: 10000 !important;
}

/* 5. 前面に出したカード内のテキストやボタンなどはモノクロに戻す */
.twostep-sauce-card .twostep-sauce-content {
    filter: grayscale(100%) !important;
}

/* 6. 下部固定カートバーを最前面に配置し、かつモノクロに設定 */
.twostep-footer-sticky {
    z-index: 20000 !important;      /* 画像より前面に重ねる */
    filter: grayscale(100%) !important; /* モノクロ表示を維持 */
}

/* 7. 【追加】ヘッダーおよびスマホ用折りたたみメニューをモノクロに設定 */
.top-nav,
.top-nav__collapse {
    filter: grayscale(100%) !important; /* 最前面にあるヘッダー内をモノクロ化 */
}