/* inohota_boost.css */
/* 追従ミニ商品カード */
.follow-product {
  position: fixed;
  right: 20px;
  bottom: 100px; /* 既存の .floating-cta と干渉しない高さに */
  z-index: 999;
  width: 320px;
  max-width: calc(100% - 40px);
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow, 0 8px 32px 0 rgba(31, 38, 135, 0.15));
  border-radius: 14px;
  padding: 12px;
  display: none; /* 初期は非表示。JSで条件表示 */
}

.follow-product__header {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
}

.follow-product__thumb {
  width: 56px; height: 80px; border-radius: 6px; object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.follow-product__title {
  line-height: 1.3; font-size: 0.95rem;
}

.follow-product__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}

.follow-product__btn {
  display: inline-block; text-align: center; padding: 10px 12px;
  border-radius: 10px; font-weight: 700; border: 0; cursor: pointer;
}

.follow-product__btn--amazon { background: #FF9900; color: #fff; }
.follow-product__btn--rakuten { background: #BF0000; color: #fff; }

.follow-product__meta {
  font-size: 0.8rem; color: #666; margin-top: 6px;
}

/* 閉じる／最小化 */
.follow-product__controls {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;
}

.follow-product__iconbtn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: #f1f3f5; cursor: pointer;
  font-size: 16px; line-height: 28px;
}

.follow-product--min {
  padding: 8px 12px;
  width: auto;
}

.follow-product--min .follow-product__header,
.follow-product--min .follow-product__actions,
.follow-product--min .follow-product__meta,
.follow-product--min img { display: none; }

.follow-product--min::after {
  content: "📘 『いのほたなぜ』をチェック";
  font-weight: 700; font-size: 0.95rem;
}

/* モバイル微調整：既存の .floating-cta と同じ余白思想に */
@media (max-width: 768px) {
  .follow-product {
    right: 20px; bottom: 80px;
    width: calc(100% - 40px);
  }
}