/**
 * evolve-ec.css
 *
 * tornos-evolve-ec独立プラグイン用スタイル。
 * `.tevec-`プレフィックスのみを使用し、evolve-commerce-core既存CSS(.ecc-button等)・
 * AquaCap Story(.ecc-aq-)・Weight Belt Story(.eccwb-)・AquaCap EC(.tornos-)の
 * いずれとも衝突しない。
 * 全ページ共通で読み込むが、実際に該当クラスが出力されるのは
 * [evolve_ec_products]ショートコードを設置したページと、商品詳細ページ(該当データがある場合)のみ。
 *
 * ★2026-09-25(ROC-13指示)evolve-commerce-core配下のecc-ec-foundation.cssから移設。
 *   クラス名接頭辞のみ`.ecc-ec-` → `.tevec-`へ変更、スタイル内容は無変更。
 */

.tevec-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.4rem;
  margin:1.4rem 0;
}

.tevec-card{ border:1px solid #e2e2e2; background:#fff; }
.tevec-card--featured{ border-color:#8b8f94; }
.tevec-card__link{ display:block; color:inherit; text-decoration:none; }
.tevec-card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#f2f2f2; }
.tevec-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tevec-card__badge{
  position:absolute; top:.5rem; left:.5rem;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  color:#fff; background:#111; padding:.15rem .5rem; text-transform:uppercase;
}
.tevec-card__name{ font-size:.86rem; font-weight:600; margin:.7rem .8rem 0; }
.tevec-card__variants{ font-size:.72rem; color:#777; margin:.3rem .8rem 0; }
.tevec-card__variants span + span{ margin-left:.6rem; }
.tevec-card__price{ font-size:.82rem; color:#444; margin:.3rem .8rem 0; }
.tevec-card__feature{ font-size:.76rem; color:#555; margin:.3rem .8rem 0; line-height:1.6; }
.tevec-card__purposes{ font-size:.7rem; color:#888; margin:.3rem .8rem .8rem; }

.tevec-purpose-badges{ margin:.6rem 0; }
.tevec-purpose-badge{
  display:inline-block;
  font-size:.68rem;
  color:#444;
  background:#f2f2f2;
  border-radius:3px;
  padding:.15rem .55rem;
  margin:0 .3rem .3rem 0;
}

.tevec-compatible{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid #e2e2e2; }
.tevec-compatible__heading{ font-size:1.1rem; margin:0 0 1rem; }

@media (max-width:640px){
  .tevec-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
}