/* --- Cart badge (header icon) --- */
.navIcon--cart{
  position: relative;
  /* 角寄せの微調整用（必要に応じて数値を詰める） */
  --badge-top: 8px;
  --badge-right: 5px;
}

.navIcon--cart .navCartBadge{
  position: absolute;
  top: var(--badge-top);
  right: var(--badge-right);
  transform: translate(30%,-30%); /* 数値を小さくすると更に密着 */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;                /* 2桁対応 */
  box-sizing: border-box;
  border-radius: 999px;
  background: #e02424;           /* 赤 */
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;    /* 白縁で視認性UP */
  z-index: 2;
  pointer-events: none;          /* クリックの邪魔をしない */
}

/* 個数0のときは非表示 */
.navCartBadge.is-empty{ display: none; }

/* SPはさらに詰める */
@media (max-width: 768px){
  .navIcon--cart{ --badge-top: 1px; --badge-right: 1px; }
  .navIcon--cart .navCartBadge{ transform: translate(15%,-15%); }
}

/* ===== Mobile only: cart badge fine-tune ===== */
@media (max-width: 768px){
  /* バッジの基準位置（アイコンの右上角） */
  .mobile-bottom-nav .navIcon--cart{
    /* ここを1〜2pxずつ触ると微調整できます */
    --badge-top: 8px;     /* 上方向(+で下に、-で上に) */
    --badge-right: 14px;   /* 右方向(+で左に、-で右に) */
  }

  /* バッジサイズ＆はみ出し量（translate％） */
  .mobile-bottom-nav .navIcon--cart .navCartBadge{
    transform: translate(30%,-36%); /* 角からの“はみ出し”量。数値↑で近づく/遠ざかる */
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    padding: 0 4px;
  }

  /* アイコンの光学バランスが気になる場合の微上げ（任意） */
  .mobile-bottom-nav .mbnav-item .fa-cart-shopping{
    position: relative;
    top: 1px;
  }
}