/* ==================================================
   YUPPY QUOKKA
   ランキングバッジ【確定版】

   実際のHTML構造：
   .yq-ranking-list
       └ .product-small.yq-rank-1
           └ .col-inner
               └ .product-small.box
                   └ .box-image

   ※ ランキング一覧以外には表示しない
================================================== */


/* ==================================================
   画像をバッジの位置基準にする
================================================== */

.yq-ranking-list
.product-small[class*="yq-rank-"]
.box-image {
    position: relative !important;
}


/* ==================================================
   ランキングバッジ共通
================================================== */

.yq-ranking-list
.product-small[class*="yq-rank-"]
.box-image::before {
    position: absolute !important;

    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 36px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #111111 !important;
    color: #FFFFFF !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    pointer-events: none !important;
}


/* ==================================================
   1位
================================================== */

.yq-ranking-list
.product-small.yq-rank-1
.box-image::before {
    content: "🥇 1" !important;
    background: #C5A46D !important;
}


/* ==================================================
   2位
================================================== */

.yq-ranking-list
.product-small.yq-rank-2
.box-image::before {
    content: "🥈 2" !important;
    background: #A8A8A8 !important;
}


/* ==================================================
   3位
================================================== */

.yq-ranking-list
.product-small.yq-rank-3
.box-image::before {
    content: "🥉 3" !important;
    background: #A97142 !important;
}


/* ==================================================
   4位
================================================== */

.yq-ranking-list
.product-small.yq-rank-4
.box-image::before {
    content: "4" !important;
}


/* ==================================================
   5位
================================================== */

.yq-ranking-list
.product-small.yq-rank-5
.box-image::before {
    content: "5" !important;
}


/* ==================================================
   6位
================================================== */

.yq-ranking-list
.product-small.yq-rank-6
.box-image::before {
    content: "6" !important;
}


/* ==================================================
   7位
================================================== */

.yq-ranking-list
.product-small.yq-rank-7
.box-image::before {
    content: "7" !important;
}


/* ==================================================
   8位
================================================== */

.yq-ranking-list
.product-small.yq-rank-8
.box-image::before {
    content: "8" !important;
}


/* ==================================================
   9位
================================================== */

.yq-ranking-list
.product-small.yq-rank-9
.box-image::before {
    content: "9" !important;
}


/* ==================================================
   10位
================================================== */

.yq-ranking-list
.product-small.yq-rank-10
.box-image::before {
    content: "10" !important;
}


/* ==================================================
   旧ランキングバッジを完全停止

   過去PHPのHTMLが残っていた場合の安全対策
================================================== */

.yq-rank-badge {
    display: none !important;
}