/* =========================================================================
   monocosmelab  /top_redesign1/（page-id 2781）人気ランキング 文字サイズ矯正
   -------------------------------------------------------------------------
   商品名 <h3 class="mcl-ranking-item__title"> が、サイト共通 custom.css の
     .page h3 { font-size:24px; font-style:italic; }
   を拾って大きく＆斜体になってしまうため、/shop_redesign1/（B-13）と同じ
   小さめ・明朝の見た目に揃える。

   ※ フォント矯正に加え、末尾でレイアウトの「重なり」矯正も行う
     （.mcl-ranking-item__link が inline のままで画像が巨大化→カードが重なる問題）。
   ※ 特異度 .page-id-2781 .mcl-ranking-*（0,2,0）＞ .page h3（0,1,1）で
     !important なしで上書きできる。
   ◆ 適用：functions.php の 2781 用 enqueue 配列に 'ranking' を追加。
   ========================================================================= */

/* ランキング内テキストを明朝系に統一（ページのトーンに合わせる） */
.page-id-2781 .mcl-ranking-title,
.page-id-2781 .mcl-ranking-title__label,
.page-id-2781 .mcl-ranking-period,
.page-id-2781 .mcl-ranking-item__title,
.page-id-2781 .mcl-ranking-item__price,
.page-id-2781 .mcl-ranking-item__price * {
  font-family: var(--kage-serif, "Noto Serif JP", "游明朝", "YuMincho", serif);
}

/* 商品名：小さめに矯正（.page h3 の 24px・italic を打ち消す） */
.page-id-2781 .mcl-ranking-item__title {
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 価格も小さめに揃える */
.page-id-2781 .mcl-ranking-item__price,
.page-id-2781 .mcl-ranking-item__price .woocommerce-Price-amount {
  font-size: 13px;
}

/* 見出しのピンク左ボーダー（.page h2 由来）を解除し中央寄せの体裁に揃える */
.page-id-2781 .mcl-ranking-title {
  border-left: none;
  padding-left: 0;
}
.page-id-2781 .mcl-ranking-title__label {
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* =========================================================================
   レイアウト矯正：カードの「重なり」解消（ショップ /shop_redesign1/ と同じ宣言）
   -------------------------------------------------------------------------
   .mcl-ranking-item__link は <a>（既定 display:inline）。中に badge / thumb /
   title などのブロックを含むため、display:block を与えないとサムネ画像の
   width:100% が効かず画像が巨大化し、カードからはみ出して上下・左右のカードと
   重なって見える。ショップで実績のある宣言を page-id-2781 で再宣言して整える。
   ※ width は 100%（親グリッドセル内）固定なので画面からはみ出さない。
     負マージンや width:auto は使わない（横スクロールの原因になるため）。
   ========================================================================= */
.page-id-2781 .mcl-ranking.mcl-ranking--grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* minmax(0,..) で画像が原因の溢れを防ぐ */
  gap: 24px;
}
@media (max-width: 1024px) {
  .page-id-2781 .mcl-ranking.mcl-ranking--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .page-id-2781 .mcl-ranking.mcl-ranking--grid {
    grid-template-columns: 1fr;
  }
}

/* ★ 重なりの主因：inline の <a> をブロック化（サムネ width:100% を効かせる） */
.page-id-2781 .mcl-ranking-item,
.page-id-2781 .mcl-ranking-item__link {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* サムネ画像をセル幅に必ず収める（巨大化・はみ出し防止） */
.page-id-2781 .mcl-ranking-item__thumb {
  width: 100%;
}
.page-id-2781 .mcl-ranking-item__thumb img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}