/* =========================================================================
   monocosmelab  /shop_redesign1/  人気ランキング 表示修正＋明朝化（B-13）
   -------------------------------------------------------------------------
   ショートコード（.mcl-ranking-*）はトップページでは正常だが、
   /shop_redesign1/ では崩れる。原因はランキングHTML・CSSではなく、
   このページ固有の文脈（alignfull の shop-ranking グループ＋page-id-2784 環境）
   での微妙なカスケード差。

   方針：トップで正常な「既知の正解レイアウト」を .page-id-2784 スコープで
   再宣言し、確実に上書きして同じ見た目に戻す。あわせて、ページ全体のトーンに
   合わせてランキング内テキストを明朝系フォントに統一する。

   ◆ 適用：functions.php の enqueue 配列に 'ranking' を追加して読み込む
     （css/shop-redesign1-ranking.css）。
   ========================================================================= */

/* =========================================================================
   1. レイアウトを既知の正解に再宣言（page-idで特異度を上げて上書き）
   ========================================================================= */

/* セクションの最大幅・中央寄せ（alignfull 親の中でも安定させる） */
.page-id-2784 .mcl-ranking-section {
  max-width: 1280px;
  width: 100%;
  margin: 48px auto 32px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* グリッド本体：PCは5等分（トップと同一） */
.page-id-2784 .mcl-ranking.mcl-ranking--grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) {
  .page-id-2784 .mcl-ranking.mcl-ranking--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .page-id-2784 .mcl-ranking.mcl-ranking--grid {
    grid-template-columns: 1fr;
  }
}

/* 各カード・リンクの幅制限を解除（グリッドセルに従わせる） */
.page-id-2784 .mcl-ranking-item,
.page-id-2784 .mcl-ranking-item__link {
  width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
}

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

/* =========================================================================
   2. 明朝フォントへ統一（ページ全体のトーンに合わせる）
   -------------------------------------------------------------------------
   ※ 2026-06-10: custom.css 側の「body, h1..h6 { font-family: ...sans !important }」
     から !important を撤去したため、本ファイルは !important 不要で勝てる
     （.page-id-2784 .mcl-ranking-* = 特異度0,2,0 ＞ 素の h3 / .entry-content h3）。
   ========================================================================= */
.page-id-2784 .mcl-ranking-title,
.page-id-2784 .mcl-ranking-title__label,
.page-id-2784 .mcl-ranking-period,
.page-id-2784 .mcl-ranking-item__title,
.page-id-2784 .mcl-ranking-item__price,
.page-id-2784 .mcl-ranking-item__price * {
  font-family: var(--kage-serif, "Noto Serif JP", "游明朝", "YuMincho", serif);
}

/* custom.css の .page h2 が付けるピンクの左ボーダー＋左パディングを解除
   （ランキング見出しは中央寄せ。他の shop-section-title と見た目を揃える） */
.page-id-2784 .mcl-ranking-title {
  border-left: none;
  padding-left: 0;
}

/* 見出し・タイトルは細めで上品に */
.page-id-2784 .mcl-ranking-title__label {
  font-weight: 500;
  letter-spacing: .06em;
}

/* 商品名：他と揃えて小さめに（このページ文脈で大きくなるのを矯正）
   ※ 大きさはお好みで 13〜15px の範囲で調整可。 */
.page-id-2784 .mcl-ranking-item__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
}

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

/* 集計期間の小さな注記は控えめに */
.page-id-2784 .mcl-ranking-period {
  letter-spacing: .02em;
}

/* 順位バッジは数字主体なのでフォントは触らない（既存の色・形を尊重） */