/* 2026-09-22 大隆さん指示書「検索結果UI統合改修」。
   スマホは横スライド（1〜2商品＋次が少し見える）、PCは楽天市場のような複数列グリッド。
   カードの高さをそろえ、商品名が長くてもレイアウトを崩さない（§2）。 */
#unifiedResults{margin:14px 0 18px}
#unifiedResults[hidden]{display:none}
.unified-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.unified-title{margin:0;font-size:18px;line-height:1.3}
.unified-count{color:var(--muted,#6d6b80);font-size:12px}
.unified-note{margin:10px 0 0;color:var(--muted,#6d6b80);font-size:12px;line-height:1.6}

.unified-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--line,#e6e0f7);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.unified-card-link{display:flex;flex-direction:column;gap:8px;padding:10px;color:inherit;text-decoration:none;flex:1 1 auto}
.unified-card-image{
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fafafa;
  overflow:hidden;
}
.unified-card-image img{width:100%;height:100%;object-fit:contain}
.unified-card-image.is-empty{background:repeating-linear-gradient(135deg,#fafafa,#fafafa 8px,#f3f3f6 8px,#f3f3f6 16px)}
.unified-card-body{display:grid;gap:4px;min-width:0}
.unified-card-name{
  font-size:12px;
  line-height:1.4;
  /* 商品名は2行で切る。長くてもカードの高さを揃える（§2） */
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
.unified-card-meta{display:flex;align-items:center;gap:6px;min-width:0}
.unified-badge{
  flex:0 0 auto;
  padding:2px 7px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.02em;
}
.unified-badge-hoshilu,.unified-badge-hoshilu_shop{background:#f3efff;color:#5140ba}
.unified-badge-web{background:#f1f5f9;color:#475569}
.unified-card-shop{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--muted,#6d6b80);
  font-size:10.5px;
}
.unified-card-price{font-size:16px;line-height:1.2;color:#c90000}
.unified-card-price-unknown{color:var(--muted,#6d6b80);font-size:10.5px}
.unified-card-matched{color:#5140ba;font-size:10.5px;font-weight:700}
.unified-keep{
  margin:0 10px 10px;
  padding:7px 8px;
  border:1px solid #f7b7d2;
  border-radius:8px;
  background:#fff;
  color:#d6337a;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.unified-keep.kept{background:#fdeef5;color:#c22a6b}
.unified-more{
  display:block;
  margin:12px auto 0;
  padding:10px 20px;
  border:1px solid #ded7ff;
  border-radius:8px;
  background:#f7f4ff;
  color:#5140ba;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

/* スマホ: 横スライド。2商品＋次が少し見える幅（§2・§9） */
@media (max-width:760px){
  .unified-list{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    padding:2px 2px 8px;
  }
  /* 2026-09-22 大隆さん報告「商品枠が左にずれすぎ」。
     画面の端まで出す（full bleed）やり方は、この節の親が画面の中央に無いため
     左へはみ出していた。はみ出させるのをやめ、**与えられた幅の中で**ちょうど
     2つ並ぶ幅にする。ページの他の枠と左端がそろう。 */
  .unified-card{
    flex:0 0 calc((100% - 10px) / 2);
    width:calc((100% - 10px) / 2);
    scroll-snap-align:start;
  }
}

/* PC: 楽天市場のような複数列グリッド＋縦スクロール。横スクロールは使わない（§4） */
@media (min-width:761px){
  .unified-list{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px){
  .unified-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1360px){
  .unified-list{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* 2026-09-22 大隆さん指示「ホシル提示は、5個ボタン設置」。
   HOSHILU 商品のカードには、商品カードと同じ5個のボタンが入る。
   カードは小さいままにしたいので、ボタンは幅いっぱいの縦積みで詰める。 */
.unified-card-full .product-card-actions{display:grid;gap:5px;margin:0 10px 10px}
.unified-card-full .product-card-action:empty{display:none}
.unified-card-full .product-card-actions button,
.unified-card-full .product-card-actions a{
  display:block;
  width:100%;
  min-height:30px;
  padding:6px 8px;
  font-size:10.5px;
  line-height:1.3;
  text-align:center;
}
.unified-card-full .experience-block{margin:0 10px 10px}
.unified-card-name{margin:0;font-weight:700}

/* 2026-09-22 大隆さん報告「価格もでてない」。web検索の価格はページに書いてあった
   数字なので、確認済みの赤い価格とは別の見た目にして、すぐ下に断りを置く。 */
.unified-card-price-listed{color:#3f3d56}
.unified-card-price-note{display:block;color:var(--muted,#6d6b80);font-size:9.5px;line-height:1.3}

/* 2026-09-22 大隆さん指示「『価格』『いつもの』『気になる』『口コミ』に変えて、
   この4つのボタンは2行にしよう」「できるだけ正方形に近づけてたい」。
   ・ボタンは2列2行
   ・「価格比較」はこの4つに入らないので、価格の隣へ移す
   ・口コミの中身は「口コミ」を押したときだけ開く */
.unified-card-full .product-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:5px;
  align-items:stretch;
}
/* 2026-09-22 大隆さん報告「ボタンの位置もガタガタ」。
   4つのボタンは、囲みの大きさも中の文字の位置もそろえる。
   囲み（.product-card-action）と、囲みの無い口コミボタンを同じ升目として扱い、
   中のボタンは升目いっぱいに広げて中央ぞろえにする。 */
.unified-card-full .product-card-actions>*{min-width:0;display:flex}
.unified-card-full .product-card-actions button,
.unified-card-full .product-card-actions a{
  margin:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.unified-reviews-toggle{
  min-width:0;
  min-height:30px;
  padding:6px 8px;
  border:1px solid #ded7ff;
  border-radius:8px;
  background:#fff;
  color:#5140ba;
  font-size:10.5px;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
}
.unified-card-full .experience-block{display:none}
.unified-card-full.reviews-open .experience-block{display:block}

/* 2026-09-22 大隆さん指示「『これ、今買う？』→『価格比較』に直して、価格の隣に設置」。
   価格と価格比較は同じ行。価格比較は右端に小さく置く。 */
.unified-card-price-row{display:flex;align-items:baseline;gap:6px;min-width:0}
.unified-card-price-row:empty{display:none}
.unified-card-price-row .product-card-action-buy{margin-left:auto;flex:0 0 auto}
.unified-card-price-row .product-card-action-buy button{
  padding:4px 7px;
  min-height:0;
  border-radius:7px;
  font-size:10px;
  white-space:nowrap;
}

/* 2026-09-22 大隆さん報告「改行されちゃってる」→ 文字は1行に収める。
   2026-09-22 大隆さん報告「価格通知と気になるボタンが見切れてる」→
   絵文字（🔔 ♡）は文字より背が高く、はみ出した分が overflow:hidden で
   切られていた。切らずに、箱の高さと行の高さを絵文字に合わせる。 */
.unified-card-full .product-card-actions button,
.unified-card-full .product-card-actions a,
.unified-reviews-toggle{
  padding:6px 3px;
  min-height:34px;
  line-height:1.5;
  font-size:10px;
  white-space:nowrap;
  overflow:visible;
}

/* 2026-09-22 大隆さん報告「web検索提示がない。どうにか出して」。
   一覧・カテゴリページも出す。ただし商品のふりはさせず、札で断り、
   商品カードより控えめにする（並び順も商品の後ろ）。 */
.unified-badge-listing{background:#fff4e5;color:#96591a}
.unified-card-listing{border-style:dashed}
.unified-card-listing .unified-card-image{opacity:.9}

/* 2026-09-22 大隆さん報告「お気にいりボタンおしたら変になったよ」。
   ♡ を押すと下に「無料登録で他の端末にも残す →」が出る。2列の升目の中に
   収まらず、隣のボタンへかぶっていた。升目いっぱいに置き、行を跨がせる。 */
.unified-card-full .product-card-action-keep{flex-direction:column;align-items:stretch}
.unified-card-full .keep-product{display:flex;flex-direction:column;gap:4px;width:100%}
.unified-card-full .keep-product-note{
  order:2;
  display:block;
  width:100%;
  font-size:9.5px;
  line-height:1.4;
  white-space:normal;
  text-align:center;
}
.unified-card-full .keep-product-note.hidden{display:none}