/* =========================================================
   PLP: ランキングを「PDPの特徴カード」見た目で流用するための上書き
   ※ PDP側（pdp-features.css）には一切手を入れない
   ========================================================= */

/* フルブリード＋右ガター */
.pdp-section--ranking .featCards.swiper,
.pdp-section--ranking .pdp-features-swiper {
  margin-right: calc(50% - 50vw);
  padding-right: var(--container-gutter);
}

/* 常に20%幅（PC/タブレット/スマホ共通） */
.pdp-section--ranking .featCards.swiper .swiper-slide {
  width: 20%;
  max-width: 20%;
  height: auto;
  box-sizing: border-box;
}

/* 画像は cover で整える */
.pdp-section--ranking .featCards__media {
  background: #f8f9fa;  /* CLS対策 */
}
.pdp-section--ranking .featCards__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ランキング順位バッジ */
.pdp-section--ranking .ranking-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:#a1905a; color:#fff; font-size:14px; font-weight:600; line-height:1;
}
/* タイトルを小さめ・太字なしに */
.pdp-section--ranking .featCards__title{
  font-size:0.875rem; font-weight:400; line-height:1.5; margin-top:0.5rem;
}

/* デフォルト（4位以降） */
.pdp-section--ranking .ranking-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-block;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  line-height: 28px;
  background: #ccc;   /* 4位以降はグレー */
  color: #fff;
}

/* 1位：ゴールド */
.pdp-section--ranking .ranking-badge.rank-1 {
  background: #FFD700;
  color: #111;
}

/* 2位：シルバー */
.pdp-section--ranking .ranking-badge.rank-2 {
  background: #C0C0C0;
  color: #111;
}

/* 3位：ブロンズ */
.pdp-section--ranking .ranking-badge.rank-3 {
  background: #CD7F32;
  color: #fff;
}
/* ランキング専用オーバーライド */
.pdp-section--ranking .swiper-pagination {
  display: none !important;
}
.pdp-section--ranking .pdp-section__title {
  border-bottom: none !important;
}
.pdp-section--ranking .pdp-section__title::after {
  content: none !important;
}

/* 戻るボタン */
.pdp-section--ranking .swiper-button-prev.pdp-feat__navPrev,
.pdp-section--ranking .swiper-button-next.pdp-feat__navNext {
  top: 56px;        /* Nextの左側に寄せる */
}

/* モバイル時（767px以下）はランキング内の矢印ボタンを非表示 */
@media (max-width: 767px) {
  .pdp-section--ranking .swiper-button-prev.pdp-feat__navPrev,
  .pdp-section--ranking .swiper-button-next.pdp-feat__navNext {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .woocommerce nav.woocommerce-pagination{
    margin-bottom: clamp(40px, 5vw, 80px);
  }
}