@charset "UTF-8";

/* =========================================================
   任意商品パーツ用 ランキング装飾（干渉防止のためクラスを限定）
========================================================= */

/* 商品アイテムのブロックを基準位置に設定 */
.custom-ranking-list2 .fs-c-productList__item {
    position: relative;
    padding-top: 35px; /* 上にバッジを表示するための余白を確保 */
}

/* ランキングバッジ（王冠＋順位テキスト）の共通スタイル */
.custom-ranking-list2 .fs-c-productList__item::before {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    
    /* 文字のスタイル（元の .ranking-value を継承） */
    font-family: serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    
    /* 王冠画像の共通設定（元の .no1::before を継承しつつ調整） */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    padding-left: 30px; /* 王冠画像の幅（25px）＋余白（5px）分、文字を右にずらす */
    height: 25px;
}

/* =======================================
   各順位ごとの装飾（数字と王冠画像の切り替え）
======================================= */

/* 1位 */
.custom-ranking-list2 .fs-c-productList__item:nth-child(1)::before {
    content: "1位";
    background-image: url(https://belleandsofa.itembox.design/item/image/crown-no1.png);
}

/* 2位 */
.custom-ranking-list2 .fs-c-productList__item:nth-child(2)::before {
    content: "2位";
    /* ▼ 2位用の王冠画像のURLに変更してください ▼ */
    background-image: url(https://belleandsofa.itembox.design/item/image/crown-no2.png); 
}

/* 3位 */
.custom-ranking-list2 .fs-c-productList__item:nth-child(3)::before {
    content: "3位";
    /* ▼ 3位用の王冠画像のURLに変更してください ▼ */
    background-image: url(https://belleandsofa.itembox.design/item/image/crown-no3.png);
}

/* 4位 */
.custom-ranking-list2 .fs-c-productList__item:nth-child(4)::before {
    content: "4位";
    /* ▼ 4位用の王冠画像のURLに変更してください ▼ */
    background-image: url(https://belleandsofa.itembox.design/item/image/crown-no4.png);
}

/* =========================================================
   任意商品パーツ用 スライダー（カルーセル）強制解除CSS
   ※上部のランキングと同じグリッド表示に戻します
========================================================= */

/* 商品リスト全体の横並び設定 */
.custom-ranking-list2 .fs-c-productList {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -10px !important; /* 左右の余白を相殺 */
  padding: 0 !important;
  overflow: visible !important; /* スライダーの隠れる設定を解除 */
}

/* 商品アイテム1つ1つの枠の設定（4つ並び） */
.custom-ranking-list2 .fs-c-productList__item {
  width: 25% !important; /* 4つ並びにする */
  float: none !important;
  margin: 0 !important;
  padding: 0 10px !important; /* 左右の余白を調整 */
  box-sizing: border-box !important;
}

/* 既存の王冠装飾用CSSはそのまま維持 */