/* ============================================================
 * Sale Ranking Section (top page / {{ content_for_index }})
 * 1400px 以下は横スクロール、1401px 以上はグリッド
 * ============================================================ */
.p-category_ranking_section {
    width: auto;
    max-width: 1440px;
    margin: 80px auto;
    padding: 0 16px;
}
@media (min-width: 1401px) {
    .p-category_ranking_section {
        padding: 0;
        margin: 120px auto;
    }
}

/* 見出し（RANKING を上、ランキング を下） */
.p-category_ranking_section .c-section_title {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}
.p-category_ranking_section .c-section_title__head {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}
.p-category_ranking_section .c-section_title__subhead {
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 0;
    display: block;
}
@media (min-width: 1401px) {
    .p-category_ranking_section .c-section_title__head {
        font-size: 50px;
    }
    .p-category_ranking_section .c-section_title__subhead {
        font-size: 16px;
        margin-top: 4px;
    }
}

/* 商品グリッド：1400px 以下は横スクロール、1401px 以上はグリッド */
.p-category_ranking_section__products {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 32px 16px 0 0;
    margin: -32px -16px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 1401px) {
    .p-category_ranking_section__products {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 50px;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    .p-category_ranking_section__products.medium-up--one-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .p-category_ranking_section__products.medium-up--one-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .p-category_ranking_section__products.medium-up--one-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.p-category_ranking_section__product {
    flex: 0 0 225px;
    position: relative;
    list-style: none;
}
@media (min-width: 1401px) {
    .p-category_ranking_section__product {
        flex: initial;
        width: auto;
    }
}

/* 商品カード */
.p-category_ranking_section .c-product_item {
    position: relative;
}
.p-category_ranking_section .c-product_item__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.p-category_ranking_section .c-product_item__inner__eyecatch {
    position: relative;
    margin-bottom: 16px;
}
.p-category_ranking_section .c-product_item__inner__eyecatch__image {
    overflow: hidden;
    border-radius: 8px;
    background-color: #F2F2F2;
}
.p-category_ranking_section .c-product_item__inner__eyecatch__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.p-category_ranking_section .c-product_item:hover .c-product_item__inner__eyecatch__image img {
    transform: scale(1.03);
}

/* ===== 順位バッジ（一回り小さく） ===== */
.p-category_ranking_section .c-product_item__inner__eyecatch__tags {
    position: absolute;
    top: -12px;
    right: -8px;
    z-index: 2;
}
.p-category_ranking_section .c-product_ranking {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F7AF07 0%, #E89800 100%);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
@media (min-width: 1401px) {
    .p-category_ranking_section .c-product_ranking {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }
}
.p-category_ranking_section .c-product_ranking__text {
    line-height: 1;
}
.p-category_ranking_section .c-product_ranking__text::after {
    content: "位";
    font-size: 0.7em;
    margin-left: 1px;
}

/* TOP3 はわずかに大きく */
.p-category_ranking_section .c-product_ranking[data-is-top-three] {
    width: 42px;
    height: 42px;
    font-size: 13px;
}
@media (min-width: 1401px) {
    .p-category_ranking_section .c-product_ranking[data-is-top-three] {
        width: 52px;
        height: 52px;
        font-size: 15px;
    }
}

/* 1位 = 金 / 2位 = 銀 / 3位 = 銅 (リスト順序で判定) */
.p-category_ranking_section__product:nth-child(1) .c-product_ranking {
    background: linear-gradient(135deg, #F5D547 0%, #C9A227 60%, #A37B0E 100%);
}
.p-category_ranking_section__product:nth-child(2) .c-product_ranking {
    background: linear-gradient(135deg, #E8E8E8 0%, #B0B0B0 60%, #828282 100%);
}
.p-category_ranking_section__product:nth-child(3) .c-product_ranking {
    background: linear-gradient(135deg, #E89A6E 0%, #B87333 60%, #884D17 100%);
}

/* NEW / SOLD OUT */
.p-category_ranking_section .c-product_item__inner__eyecatch__tags__new,
.p-category_ranking_section .c-product_item__inner__eyecatch__tags__soldout {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
    color: #fff;
    z-index: 2;
}
.p-category_ranking_section .c-product_item__inner__eyecatch__tags__new {
    background-color: #F7AF07;
}
.p-category_ranking_section .c-product_item__inner__eyecatch__tags__soldout {
    background-color: #000;
}

/* ===== カート / お気に入りボタン (シンプルアイコン) ===== */
.p-category_ranking_section .c-product_item__actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.p-category_ranking_section .c-product_item__form {
    margin: 0;
}
.p-category_ranking_section .c-product_item__button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.p-category_ranking_section .c-product_item__button:hover {
    opacity: 0.9;
    background-color: #FFF8E5;
}

/* 既存の <i class="u-icon--cart"> / <i class="u-icon--heart"> をシンプル SVG に */
.p-category_ranking_section .c-product_item__button .u-icon--cart,
.p-category_ranking_section .c-product_item__button .u-icon--heart {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #333;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.p-category_ranking_section .c-product_item__button .u-icon--cart::before,
.p-category_ranking_section .c-product_item__button .u-icon--heart::before {
    content: "";
}
.p-category_ranking_section .c-product_item__button .u-icon--cart {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M3 4h2.4l2.7 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.5L21.5 8H6.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M3 4h2.4l2.7 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.5L21.5 8H6.5'/></svg>");
}
.p-category_ranking_section .c-product_item__button .u-icon--heart {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7.5-4.5-9.5-9.2C1 8 3 4 7 4c2.2 0 3.7 1.2 5 3 1.3-1.8 2.8-3 5-3 4 0 6 4 4.5 7.8C19.5 16.5 12 21 12 21z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7.5-4.5-9.5-9.2C1 8 3 4 7 4c2.2 0 3.7 1.2 5 3 1.3-1.8 2.8-3 5-3 4 0 6 4 4.5 7.8C19.5 16.5 12 21 12 21z'/></svg>");
}
.p-category_ranking_section .c-product_item__button--favorite.is-active .u-icon--heart {
    background-color: #F7AF07;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-7.5-4.5-9.5-9.2C1 8 3 4 7 4c2.2 0 3.7 1.2 5 3 1.3-1.8 2.8-3 5-3 4 0 6 4 4.5 7.8C19.5 16.5 12 21 12 21z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-7.5-4.5-9.5-9.2C1 8 3 4 7 4c2.2 0 3.7 1.2 5 3 1.3-1.8 2.8-3 5-3 4 0 6 4 4.5 7.8C19.5 16.5 12 21 12 21z'/></svg>");
}

/* 商品テキスト */
.p-category_ranking_section .c-product_item__inner__content {
    position: relative;
    z-index: 0;
}
.p-category_ranking_section .c-product_item__inner__title {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    color: #222;
}
@media (min-width: 1401px) {
    .p-category_ranking_section .c-product_item__inner__title {
        font-size: 16px;
    }
}
.p-category_ranking_section .c-product_item__inner__category,
.p-category_ranking_section .product_description {
    display: none;
}

/* ===== 価格表示「1,566円 税込」形式 =====
   liquid 側で出力は「1,566円」(¥ 削除済)。
   括弧内の重複価格は CSS で非表示にし、末尾に「税込」を ::after で追加 */
.p-category_ranking_section .c-product_item__inner__price {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.4;
    color: #222;
}
.p-category_ranking_section .c-product_item__inner__price > span:not(.price):not(.origin):not(.sale) {
    display: none;
}
.p-category_ranking_section .c-product_item__inner__price .price {
    font-size: 16px;
    font-weight: 400;
}
@media (min-width: 1401px) {
    .p-category_ranking_section .c-product_item__inner__price .price {
        font-size: 18px;
    }
}
.p-category_ranking_section .c-product_item__inner__price .origin {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
    margin-right: 6px;
    font-weight: 400;
}
.p-category_ranking_section .c-product_item__inner__price .sale {
    color: #ff0000;
    font-size: 16px;
    font-weight: 700;
}
@media (min-width: 1401px) {
    .p-category_ranking_section .c-product_item__inner__price .sale {
        font-size: 18px;
    }
}
.p-category_ranking_section .c-product_item__inner__price::after {
    content: " 税込";
    font-size: 11px;
    color: #666;
    font-weight: 400;
    margin-left: 4px;
}

/* バッジ */
.p-category_ranking_section .c-cart_item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.p-category_ranking_section .c-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: #f0f0f0;
}
.p-category_ranking_section .c-badge--delivery-group {
    background-color: #e3f2fd;
}
.p-category_ranking_section .c-badge--concurrent-purchase-group {
    background-color: #e8f5e9;
}

/* もっと見るボタン非表示 */
.p-category_ranking_section__more {
    display: none;
}