/*
 * 推しブランド（RIFBAR → INFLAVE）へ回す導線（inc/brand-push.php・2026-10-30）。
 *
 * 売り切れの商品ページの「近い味で、いま買えるもの」（.nb-push-alt）。
 * カートドロワーは「おすすめ商品」の棚のカードをそのまま使うので、ここには何も無い。
 *
 * 色は DESIGN.md の決まりどおり var(--nb-color-*) だけを使う（緑は #138808 の 1 色）。
 * 緑の小さな文字は白地にだけ置く。薄い緑の地の上の文字は黒（text）。
 */

.nb-push-alt {
  margin-top: 16px;
  padding: 14px 16px 6px;
  border: 1px solid var(--nb-color-brand-line, rgba(19, 136, 8, 0.22));
  border-radius: 12px;
  background: #fff;
}

.nb-push-alt__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--nb-color-text, #1a1a1a);
}

.nb-push-alt__sub {
  margin: 2px 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--nb-color-text-sub, #5a5a5a);
}

.nb-push-alt__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.nb-push-alt__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--nb-color-line, #e3e0db);
}

.nb-push-alt__item:first-child {
  border-top: 0;
}

.nb-push-alt__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nb-color-text, #1a1a1a);
  text-decoration: none;
}

.nb-push-alt__img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border: 1px solid var(--nb-color-line, #e3e0db);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.nb-push-alt__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nb-push-alt__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.nb-push-alt__brand {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--nb-color-text-sub, #5a5a5a);
}

/* 「★ レビュー評価1位」。緑は星だけに使い、文字は黒。 */
.nb-push-alt__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--nb-color-brand-tint, rgba(19, 136, 8, 0.09));
  color: var(--nb-color-text, #1a1a1a);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.nb-push-alt__badge svg {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
}

.nb-push-alt__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
}

.nb-push-alt__price {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 円の参考表示は枠が狭いので出さない（商品ページに行けば出る）。 */
.nb-push-alt__price .nicobay-jpy-ref {
  display: none;
}

.nb-push-alt__add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--nb-color-brand, #138808);
  color: var(--nb-color-on-brand, #fff);
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.nb-push-alt__add:hover,
.nb-push-alt__add:focus-visible {
  color: var(--nb-color-on-brand, #fff);
  filter: var(--nb-hover-filter, brightness(0.9));
}

@media screen and (max-width: 749px) {
  .nb-push-alt {
    padding: 12px 12px 4px;
  }

  .nb-push-alt__img {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .nb-push-alt__add {
    height: 32px;
    padding: 0 12px;
  }
}