/* =====================================================================
   商品リンクの箱（自作版カエレバ）：ショートコード [itembox]・ITEM ブロック（nrocks/itembox）
   - functions.php の nrocks_itembox_shortcode() が作る HTML の書式
   - 公開ページと、記事の編集画面（ブロックのプレビュー）の両方で読み込む（functions.php の enqueue_block_assets）
   - 前は css/main.css に書いていた
   ===================================================================== */

/* ---- 商品リンクの箱（自作版カエレバ）：ショートコード [itembox]（functions.php の nrocks_itembox_shortcode()） ----
   ・REFERENCE（MEMORANDUM のカード）と同じ雰囲気：左に縦線、1行目「アイコン ITEM BUY FIRST & REGRET LATER」、2行目に商品名
   ・グレーの縦線 → 見出し・商品名・ショップのリンク、右端に小さい商品の写真（60px 角。出す設定のときだけ）
   ・ラベル（ITEM）はヘッダーのメニューと同じ Montserrat・700・大文字、商品名は本文と同じ
   ・アイコン（バーコード・>）と縦線は薄いグレー（#bcbcbc。トンボの線と同じ） */
.itembox {
  display: flex;
  align-items: center;       /* 写真と文字のかたまりは縦の真ん中で揃える */
  gap: 16px;                 /* 文字のかたまり 〜 写真 */
  margin: 24px 0;
}
/* 縦線の右：見出し・商品名・ショップのリンク（縦線はこのかたまりの左に付ける） */
.itembox__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid #bcbcbc;
}
/* 右端：小さい写真（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;
}
/* 見出し：アイコン ITEM > 商品名 */
.itembox .itembox__head {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;          /* 行間を詰める（前は 1.5） */
}
.itembox__head .fa-barcode {
  color: #bcbcbc;
  margin-right: 0.4em;
}
.itembox__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* ITEM の横のひと言：ラベルと同じ太さ（700。前は 400）、間を少し空ける */
.itembox__tagline {
  margin-left: 0.6em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* 2行目：商品名（本文と同じ書式） */
.itembox .itembox__name {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
}
/* ショップのリンク：ヘッダーのメニューと同じ書式 */
.itembox .itembox__shops {
  margin: 3px 0 0;           /* 見出し 〜 ショップのリンク（前は 6px） */
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.itembox .itembox__shops a,
.content .itembox .itembox__shops a[target="_blank"] {   /* 本文の「別タブで開くリンクに下線」（.content a[target="_blank"]）を打ち消す */
  color: inherit;
  text-decoration: none;
}
.itembox__shops a + a {
  margin-left: 1.2em;
}
.itembox__shops a:hover {
  color: #bdc3c7;
}
/* 計測用の1px画像は見えないように（場所も取らない） */
.itembox__pixel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ショップのリンクの頭に鎖のアイコン（Font Awesome 7 の link \f0c1。記事の SHARE のリンクと同じ。前は外部リンク \f08e） */
.itembox__shops a::before {
  content: "\f0c1";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.2em;       /* アイコン 〜 文字（SHARE と同じ） */
  letter-spacing: 0;
}