/* =====================================================================
   ITEM：商品リンクの箱（[itembox]・ブロック nrocks/itembox）の「形」
   - プラグイン BACKON ITEM の CSS。並び・余白・写真の大きさ・縦線の太さだけ
   - 文字（フォント・大きさ・太さ）・色・線の色・アイコンはテーマの CSS で指定する
     例）.itembox__body { border-left-color: #ccc; }
         .itembox__icon::before { font-family: "Font Awesome 7 Free"; font-weight: 900; content: "\f02a"; }
   - テーマで何も指定しなければ、文字はそのテーマの本文と同じ、線は文字の色で出る
   ===================================================================== */

/* 箱：左のかたまり（縦線＋文字）と、右端の写真（設定「右」のとき）を横に並べる */
.itembox {
  display: flex;
  align-items: center;       /* 写真と文字のかたまりは縦の真ん中で揃える */
  gap: 16px;                 /* 文字のかたまり 〜 写真 */
  margin: 24px 0;
}
/* 縦線の右：1行目・商品名・ショップのリンク（線の色はテーマで。指定がなければ文字の色） */
.itembox__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0 2px 14px;
  border-left-width: 3px;
  border-left-style: solid;
}
/* 行と行の間（テーマの p の余白を打ち消す） */
.itembox .itembox__head {
  margin: 0;
}
.itembox .itembox__name {
  margin: 2px 0 0;
}
.itembox .itembox__shops {
  margin: 3px 0 0;
}
/* アイコンの入れ物（中身はテーマの ::before） */
.itembox__icon {
  display: inline-block;
  line-height: 1;
}
/* ショップのリンクの間 */
.itembox__shops a + a {
  margin-left: 1.2em;
}
/* 写真を左に出す設定（.itembox--thumb）：写真 ＋ 商品名・ショップの2行を横に並べる */
.itembox__row {
  display: flex;
  align-items: center;
  gap: 8px;                  /* 写真 〜 文字 */
  margin: 2px 0 0;           /* 1行目 〜 この並び */
}
.itembox__text {
  min-width: 0;
}
.itembox__row .itembox__name {
  margin: 0;
}
/* 写真（28px 角。正方形に切り抜く）と、写真がない箱の空の入れ物（中身はテーマの CSS） */
.itembox .itembox__thumb {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  object-fit: cover;
}
.itembox__thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 写真を右に出す設定：右端に小さい写真（60px 角に収める） */
.itembox__img {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itembox__img img {
  max-width: 60px;
  max-height: 60px;
  width: auto;
  height: auto;
  margin: 0;
}
/* 計測用の1px画像は見えないように（場所も取らない） */
.itembox__pixel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}