/* 中段「気になる商品」= 上段 .mc-shelf/.mc-p を継承し、差分だけ。 */
/* ホットリンク画像は実寸/CLS対策の width/height を持たないので、メディア枠を正方アスペクトで固定。 */
.mc-shelf--find .mc-p__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f4f4f4;border-radius:8px}
.mc-shelf--find .mc-p__img{width:100%;height:100%;object-fit:cover;display:block}
.mc-shelf--find .mc-p__source{font-size:12px;color:#7a7a7a;margin:8px 0 2px}
.mc-shelf--find .mc-p__price{font-weight:700;margin:2px 0 8px}
/* キッカーの色をティファニーに寄せる（ブランド一貫） */
.mc-shelf--find .mc-sec-head__k{color:#0ABAB5}

/* Amazon段: カードのどこを押してもAmazonへ（2026-07-18 ユーザー指示）。
   ★<a> を入れ子にすると不正HTMLになるので、購入ボタンのリンクを疑似要素で
   カード全体に広げる（stretched link）。リンクは1本のまま＝支援技術にもボタン名が読まれる。 */
.mc-shelf--amazon .mc-p--amazon{position:relative;cursor:pointer}
.mc-shelf--amazon .mc-p--amazon .mc-p__buy a::after{content:"";position:absolute;inset:0;z-index:1}
/* 画像やテキストがリンクの上に来ないように（クリック領域を確実に取る） */
.mc-shelf--amazon .mc-p--amazon .mc-p__media,
.mc-shelf--amazon .mc-p--amazon .mc-p__body{position:relative;z-index:0}
/* ホバーでカード全体が反応することを見せる */
.mc-shelf--amazon .mc-p--amazon:hover .mc-p__name{text-decoration:underline}

/* Amazon段のカード体裁（2026-07-18 ユーザー指示）:
   商品名は3行で省略し、その分だけカード高さを全部そろえる。 */
.mc-shelf--amazon .mc-shelf__grid{align-items:stretch}
.mc-shelf--amazon .mc-p--amazon{display:flex;flex-direction:column;height:100%}
.mc-shelf--amazon .mc-p--amazon .mc-p__body{display:flex;flex-direction:column;flex:1}
/* 商品名＝3行で打ち切り（…）。Amazonの商品名は長いので必須。 */
.gm-pillar .mc-shelf--amazon .mc-p--amazon .mc-p__name{
  /* ★pillar.css の .gm-pillar .mc-p__name が white-space:nowrap（＝1行固定）なので、
     まずそれを解除しないと line-clamp は効かない（実測で1行のままだった）。 */
  white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;text-overflow:ellipsis;
  /* 3行ぶんの高さを常に確保＝カードの高さが商品名の長短でズレない */
  min-height:calc(1.5em * 3);line-height:1.5;
}
/* 価格と購入ボタンは常に下端にそろえる */
.mc-shelf--amazon .mc-p--amazon .mc-p__price{margin-top:auto}
.mc-shelf--amazon .mc-p--amazon .mc-p__buy{margin-top:8px}

/* 出典表記をAmazon公式ワードマークに（2026-07-18 ユーザー指示）。
   テキストの .mc-p__source と同じ位置・同じ余白に収める。 */
.gm-pillar .mc-shelf--amazon .mc-p--amazon .mc-p__source--logo{margin:8px 0 2px;line-height:1}
.gm-pillar .mc-shelf--amazon .mc-p--amazon .mc-p__logo{height:11px;width:auto;display:block}