/* カスタマイズ用CSS */

/* ------------------------------------------------------------
   商品アイコン

   旧サイト(EC-ORANGE)が商品一覧・詳細に表示していたアイコンです。
   NEW / オススメ / 限定品 / 送料無料 / アンティーク の5種類で、
   旧サイトの画像 (icon01〜05.gif) をそのまま使っています。

   EC-CUBE4 ではタグ機能 (dtb_tag) で管理しています。
   タグIDが旧サイトの並びと対応します。
     1=NEW 2=オススメ 3=限定品 4=送料無料 5=アンティーク

   画像は33×33pxで、旧サイトと同じサイズです。
   ------------------------------------------------------------ */

.dg-productIcons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* 説明文と詰まって見えないよう、上に少し余白を取ります */
    margin: 10px 0 8px;
    /* 商品名の左端と揃えるため、ul のインデントを打ち消します。
       EC-CUBE のスタイルが padding-left を持つため明示的に 0 にします。 */
    padding-left: 0;
    /* 黒い丸ポチ(リストマーカー)を消します。
       ul/li 両方に指定しないと環境によって残ります。 */
    list-style: none;
}

.dg-productIcons > li {
    margin: 0;
    padding: 0;
    /* 画像の下に余白ができるのを防ぎます */
    line-height: 0;
    list-style: none;
}

/* リストマーカーの疑似要素を使うテーマ対策 */
.dg-productIcons > li::before,
.dg-productIcons > li::marker {
    content: none;
}

.dg-productIcons img {
    display: block;
    width: 33px;
    height: 33px;
}

/* 商品詳細では EC-CUBE 標準のタグ用クラスと併用するため、
   そちらの装飾(枠線・背景)が効かないようにします。 */
.ec-productRole__tags.dg-productIcons .ec-productRole__tag {
    border: none;
    padding: 0;
    background: none;
}