/* ============================================================
   fav.css — お気に入り（ハートトグル・件数バッジ・お気に入りページ）
   ============================================================ */
[x-cloak] { display: none !important; }
.fav-btn {
  display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px;
  border: var(--hair); background: color-mix(in oklab, #fff 86%, transparent);
  color: var(--ink-3); cursor: pointer; padding: 0; border-radius: 0;
  transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease), background var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.fav-btn svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-btn:hover { color: var(--red); border-color: var(--red); }
.fav-btn.is-on { color: var(--red); border-color: var(--red); }
.fav-btn.is-on svg { fill: var(--red); stroke: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .fav-btn.is-on svg { animation: favPop .32s var(--ease); }
}
@keyframes favPop { 0% { transform: scale(.7); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* カード上のオーバーレイ配置 */
.plate { position: relative; }
.plate > .fav-btn { position: absolute; inset-block-start: var(--s-2xs); inset-inline-end: var(--s-2xs); z-index: 3; }

/* 商品詳細の価格脇 */
.fav-btn--lg { inline-size: 46px; block-size: 46px; }
.fav-btn--lg svg { inline-size: 24px; block-size: 24px; }

/* ヘッダー件数バッジ */
.nav__icon { position: relative; }
.nav__badge {
  position: absolute; inset-block-start: -6px; inset-inline-end: -8px;
  min-inline-size: 16px; block-size: 16px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 9px;
  font-family: var(--grotesk); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}

/* お気に入りページ */
.fav-empty { text-align: center; color: var(--ink-2); padding-block: var(--s-2xl); }
.fav-empty a { color: var(--red); }