@charset "UTF-8";
/* =============================================================
   商品アイコン（product_icon_filters）表示
   ※ top.css / category.css とは分離。マージ時はよしなに統合。
   - 一覧カード：商品画像の下・商品名の上／左寄せ／高さ25px・幅自動
   - 商品詳細  ：品番の上／左寄せ／高さ30px・幅自動
============================================================= */

/* 共通 */
.icon-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
.icon-list > li {
  display: flex;
  align-items: center;
  margin: 0;
}
.icon-list .icon-img {
  width: auto;          /* 幅は自動 */
  display: block;
}
/* 画像未登録アイコンの暫定テキスト表示（画像アップ後は<img>に置き換わる） */
.icon-list .icon-text {
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--color-border, #cfdbe6);
  border-radius: 4px;
  color: var(--color-text-mid, #555);
  background: #fff;
}

/* 一覧カード：高さ20px。アイコン無し/有りでカード高さを揃えるため行の高さを常に確保 */
.item-card .icon-list {
  margin: 8px 0 4px;
  min-height: 20px;
}
.item-card .icon-list .icon-img {
  height: 20px;
  width: auto;        /* .item-card img{width:100%} の上書き（横つぶれ防止） */
  max-width: none;    /* reset.css の max-inline-size:100% を解除 */
  flex: 0 0 auto;     /* flex内で縮まないように */
}
.item-card .icon-list .icon-text {
  font-size: 10px;
  padding: 3px 6px;
}

/* 商品詳細：高さ30px（品番上） */
.items-detail .icon-list,
.items-white-box .icon-list {
  margin: 10px 0;
}
.items-detail .icon-list .icon-img,
.items-white-box .icon-list .icon-img {
  height: 30px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}