/* =====================================================================
   ITEM：商品リンクの箱（[itembox]・ブロック nrocks/itembox）の文字・色・アイコン
   - 箱の HTML と「形」（並び・余白・写真の大きさ・縦線の太さ）はプラグイン BACKON ITEM（css/item.css）
   - ここはこのテーマの見た目だけ：ラベル・ショップのリンクは Montserrat・700・大文字、商品名は本文と同じ、
     アイコン（バーコード・鎖）と縦線は薄いグレー（--ntl-c-faint。トンボの線と同じ）
   - 公開ページと、記事の編集画面（ブロックのプレビュー）の両方で読み込む（functions.php の nrocks_enqueue_card_assets()）
   ===================================================================== */

/* ★ アイコンの色（ITEM・SEE ALSO・REFERENCE で共通。変えるときはここだけ）
   ・使っている所：css/item.css の .itembox__icon・.itembox__thumb--none、css/itembox.css の SEE ALSO・REFERENCE のアイコン
   ・各所は var(--ntl-icon, #c2c2c2) と書いてあるので、この行が無くても今の色で出る
   ・色は css/main.css の :root（--ntl-c-faint）。編集画面には main.css が無いので後ろの #c2c2c2 */
:root {
 --ntl-icon: var(--ntl-c-faint, #c2c2c2);
 /* ★ カードの左の写真・ファビコンの大きさ（ITEM・SEE ALSO・REFERENCE で共通）
    ・文字2行（10.8px×1.2×2＋余白＝26.4px）と同じ高さ。変えるときはここだけ */
 --ntl-thumb: 26px;
}

/* 縦線の色 */
.itembox__body {
  border-left-color: var(--ntl-c-faint, #c2c2c2);
}

/* 1行目：アイコン ITEM "BUY FIRST & REGRET LATER" */
.itembox .itembox__head {
  font-size: 10.8px;         /* ★ 本文（12px）より一回り小さく＝MEMO のリンクカードと同じ（2026-11-14。前は 12px） */
  line-height: 1.2;          /* 前は 1.3 */
}
/* バーコードのアイコン（Font Awesome 7 の barcode \f02a）。変えるときは content だけ */
.itembox__icon {
  color: var(--ntl-icon, #c2c2c2);
  margin-right: 0.4em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.itembox__icon::before {
  content: "\f02a";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
}
.itembox__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* ITEM の横のひと言：ラベルと同じ太さ、間を少し空ける */
.itembox__tagline {
  margin-left: 0.6em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* 左の写真（プラグインの設定「左」。SEE ALSO のアイキャッチと同じ角丸）
   ・大きさはプラグインの 28px を --ntl-thumb で上書き（写真なしの箱も同じ） */
.itembox .itembox__thumb {
  width: var(--ntl-thumb, 28px);
  height: var(--ntl-thumb, 28px);
  border-radius: 4px;
}
/* 写真がない箱：薄いグレーの四角 ＋ 写真のアイコン（Font Awesome 7 の image \f03e）。変えるときは content だけ */
.itembox__thumb--none {
  background: var(--ntl-c-fill, #f0f0f0);
  color: var(--ntl-icon, #c2c2c2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.itembox__thumb--none::before {
  content: "\f03e";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

/* 2行目：商品名（本文と同じ書式） */
.itembox .itembox__name {
  font-size: 10.8px;         /* ★ 本文（12px）より一回り小さく＝MEMO のリンクカードと同じ（2026-11-14。前は 12px） */
  line-height: 1.2;          /* 前は 1.3 */
}

/* 3行目：ショップのリンク（ヘッダーのメニューと同じ書式） */
.itembox .itembox__shops {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
  margin-top: 0;             /* 商品名との間を詰める（2026-11-13。プラグインの 3px を打ち消す） */
}
.itembox .itembox__shops a,
.content .itembox .itembox__shops a[target="_blank"] {   /* 本文の「別タブで開くリンクに下線」（.content a[target="_blank"]）を打ち消す */
  color: inherit;
  text-decoration: none;
}
/* マウスオン：上の color: inherit と同じ強さで書かないと効かない */
.itembox .itembox__shops a:hover,
.content .itembox .itembox__shops a[target="_blank"]:hover {
  color: var(--ntl-c-faint, #c2c2c2);
}
/* ショップのリンクの頭に鎖のアイコン（Font Awesome 7 の link \f0c1。記事の SHARE のリンクと同じ） */
.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;
}